move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/animations/_zoom.scss

@@ -0,0 +1,394 @@
+////
+///
+/// Zoom Animations Mixin Module
+/// ===========================================================================
+///
+/// Provides SCSS mixins for creating zoom animations that scale elements in
+/// and out. Includes standard zoom, speed variations, and combined zoom
+/// effects with fade and rotation.
+///
+/// @group Animations
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @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 up and down.
+///
+/// @name animate_zoom
+/// @param {Number} $scale [$animate_scale_zoom] - Scale factor at animation peak
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+/// @example scss - Basic usage
+///   .image {
+///     @include animate_zoom;
+///   }
+///
+@mixin animate_zoom(
+    $scale: $animate_scale_zoom,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom($scale);
+}
+
+
+///
+/// Gentle Zoom Animation
+/// ---------------------------------------------------------------------------
+/// A slower, more subtle zoom effect.
+///
+/// @name animate_zoom_slow
+/// @param {Number} $scale [$animate_scale_zoom_slow] - Scale factor at animation peak
+/// @param {Time} $duration [$animate_base_duration_slow] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_zoom_slow(
+    $scale: $animate_scale_zoom_slow,
+    $duration: $animate_base_duration_slow,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_slow,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_slow($scale);
+}
+
+
+///
+/// Rapid Zoom Animation
+/// ---------------------------------------------------------------------------
+/// A faster, more intense zoom effect.
+///
+/// @name animate_zoom_fast
+/// @param {Number} $scale [$animate_scale_zoom_fast] - Scale factor at animation peak
+/// @param {Time} $duration [$animate_base_duration_fast] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_zoom_fast(
+    $scale: $animate_scale_zoom_fast,
+    $duration: $animate_base_duration_fast,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_fast,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_fast($scale);
+}
+
+
+///
+/// Zoom with Fade Animation
+/// ---------------------------------------------------------------------------
+/// Combines zoom with a fade effect for a breathing appearance.
+///
+/// @name animate_zoom_fade
+/// @param {Number} $scale [1.5] - Scale factor at animation peak
+/// @param {Number} $opacity_min [0.5] - Minimum opacity
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_zoom_fade(
+    $scale: 1.5,
+    $opacity_min: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_fade,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_fade($scale, $opacity_min);
+}
+
+
+///
+/// Zoom In Animation
+/// ---------------------------------------------------------------------------
+/// Creates an entrance animation that zooms an element in from scaled down.
+///
+/// @name animate_zoom_in
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in(
+    $start_scale: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in($start_scale);
+}
+
+
+///
+/// Zoom Out Animation
+/// ---------------------------------------------------------------------------
+/// Creates an exit animation that zooms an element out.
+///
+/// @name animate_zoom_out
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_zoom_out(
+    $end_scale: 0.5,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_zoom_out,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_out($end_scale);
+}
+
+
+///
+/// Zoom with Rotate Animation
+/// ---------------------------------------------------------------------------
+/// Combines zoom with rotation for a dynamic effect.
+///
+/// @name animate_zoom_rotate
+/// @param {Number} $scale [1.5] - Scale factor at animation peak
+/// @param {Angle} $rotation [15deg] - Rotation angle
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in-out] - Timing function
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - Iterations
+///
+@mixin animate_zoom_rotate(
+    $scale: 1.5,
+    $rotation: 15deg,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count
+) {
+    @include animate_base(
+        animate_zoom_rotate,
+        $duration,
+        $timing_function,
+        $iteration_count
+    );
+    @include keyframes_zoom_rotate($scale, $rotation);
+}
+
+
+///
+/// Zoom In Up Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from below the element's position.
+///
+/// @name animate_zoom_in_up
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_up(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_up($start_scale, $distance);
+}
+
+
+///
+/// Zoom In Down Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from above the element's position.
+///
+/// @name animate_zoom_in_down
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_down(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_down($start_scale, $distance);
+}
+
+
+///
+/// Zoom In Left Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from the left of the element's position.
+///
+/// @name animate_zoom_in_left
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_left(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_left,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_left($start_scale, $distance);
+}
+
+
+///
+/// Zoom In Right Animation
+/// ---------------------------------------------------------------------------
+/// Zooms in from the right of the element's position.
+///
+/// @name animate_zoom_in_right
+/// @param {Number} $start_scale [0.5] - Starting scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-out] - Timing function
+///
+@mixin animate_zoom_in_right(
+    $start_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-out
+) {
+    @include animate_base(
+        animate_zoom_in_right,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: both
+    );
+    @include keyframes_zoom_in_right($start_scale, $distance);
+}
+
+
+///
+/// Zoom Out Up Animation
+/// ---------------------------------------------------------------------------
+/// Zooms out while moving up.
+///
+/// @name animate_zoom_out_up
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_zoom_out_up(
+    $end_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_zoom_out_up,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_zoom_out_up($end_scale, $distance);
+}
+
+
+///
+/// Zoom Out Down Animation
+/// ---------------------------------------------------------------------------
+/// Zooms out while moving down.
+///
+/// @name animate_zoom_out_down
+/// @param {Number} $end_scale [0.5] - Ending scale
+/// @param {Length} $distance [20px] - Distance to travel
+/// @param {Time} $duration [$animate_base_duration] - Animation duration
+/// @param {String} $timing_function [ease-in] - Timing function
+///
+@mixin animate_zoom_out_down(
+    $end_scale: 0.5,
+    $distance: 20px,
+    $duration: $animate_base_duration,
+    $timing_function: ease-in
+) {
+    @include animate_base(
+        animate_zoom_out_down,
+        $duration,
+        $timing_function,
+        1,
+        $fill_mode: forwards
+    );
+    @include keyframes_zoom_out_down($end_scale, $distance);
+}

package/src/scss/mixins/controls/_cursor.scss

@@ -0,0 +1,203 @@
+////
+///
+/// Cursor Controls Mixin Module
+/// =========================================================================
+///
+/// Provides a comprehensive set of mixins for managing cursor styles.
+/// Includes utility mixins for common cursor types, custom cursors with
+/// fallback options, animated cursors, and advanced use cases involving
+/// state-based and responsive cursor handling.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:map";
+@use "../../variables" as *;
+@use "../../maps" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Mixin for applying a cursor style using predefined cursor types from the map.
+/// ---------------------------------------------------------------------------
+///
+/// @name cursor_style
+/// @param {String} $type ['default'] - The cursor style to apply.
+/// @example scss - Usage
+///   .element { @include cursor_style('pointer'); } // Applies pointer cursor
+///
+@mixin cursor_style($type: "default") {
+    @if map.has-key($cursor_styles, $type) {
+        cursor: map.get($cursor_styles, $type);
+    } @else {
+        cursor: $type; // Fallback if type is not in map
+    }
+}
+
+///
+/// Mixin for custom cursor images with fallback options.
+/// ---------------------------------------------------------------------------
+///
+/// @name cursor_custom
+/// @param {String} $url - URL of the custom cursor image.
+/// @param {String} $fallback ['pointer'] - Fallback cursor style.
+/// @example scss - Usage
+///   .element { @include cursor_custom('path/to/cursor.png', 'pointer'); }
+///
+@mixin cursor_custom($url, $fallback: pointer) {
+    cursor: url($url), $fallback;
+    // cursor: url(#{$url}), #{$fallback};
+}
+
+
+
+
+
+
+// ============================================================================
+// Utility Mixins for Common Cursor Styles
+// ============================================================================
+
+@mixin cursor_default { @include cursor_style('default'); }
+@mixin cursor_pointer { @include cursor_style('pointer'); }
+@mixin cursor_text { @include cursor_style('text'); }
+@mixin cursor_disabled { @include cursor_style('not-allowed'); }
+@mixin cursor_not_allowed { @include cursor_style('not-allowed'); }
+@mixin cursor_move { @include cursor_style('move'); }
+@mixin cursor_grab { @include cursor_style('grab'); }
+@mixin cursor_grabbing { @include cursor_style('grabbing'); }
+@mixin cursor_help { @include cursor_style('help'); }
+@mixin cursor_wait { @include cursor_style('wait'); }
+@mixin cursor_crosshair { @include cursor_style('crosshair'); }
+@mixin cursor_zoom_in { @include cursor_style('zoom-in'); }
+@mixin cursor_zoom_out { @include cursor_style('zoom-out'); }
+
+
+// ============================================================================
+// Resize Cursor Mixins
+// ============================================================================
+
+@mixin cursor_n_resize { @include cursor_style('n-resize'); }
+@mixin cursor_e_resize { @include cursor_style('e-resize'); }
+@mixin cursor_s_resize { @include cursor_style('s-resize'); }
+@mixin cursor_w_resize { @include cursor_style('w-resize'); }
+@mixin cursor_ne_resize { @include cursor_style('ne-resize'); }
+@mixin cursor_se_resize { @include cursor_style('se-resize'); }
+@mixin cursor_sw_resize { @include cursor_style('sw-resize'); }
+@mixin cursor_nw_resize { @include cursor_style('nw-resize'); }
+@mixin cursor_ew_resize { @include cursor_style('ew-resize'); }
+@mixin cursor_ns_resize { @include cursor_style('ns-resize'); }
+@mixin cursor_col_resize { @include cursor_style('col-resize'); }
+@mixin cursor_row_resize { @include cursor_style('row-resize'); }
+
+
+// ============================================================================
+// Advanced Mixins
+// ============================================================================
+
+///
+/// Mixin for hover and focus cursor effects.
+/// ---------------------------------------------------------------------------
+///
+/// @name hover_focus_cursor
+/// @param {String} $hover ['pointer'] - Cursor style on hover.
+/// @param {String} $focus ['pointer'] - Cursor style on focus.
+///
+@mixin hover_focus_cursor($hover: pointer, $focus: pointer) {
+    &:hover { cursor: $hover; }
+    &:focus {
+        cursor: $focus;
+        outline: none; // Customize focus styles as needed
+    }
+}
+
+///
+/// Mixin for responsive cursor handling based on device capability.
+/// ---------------------------------------------------------------------------
+///
+/// @name cursor_responsive
+/// @param {String} $desktop ['pointer'] - Cursor for desktop devices.
+/// @param {String} $touch ['default'] - Cursor for touch devices.
+///
+@mixin cursor_responsive(
+    $desktop: pointer,
+    $touch: default
+) {
+    @media (pointer: fine) { cursor: $desktop; }
+    @media (pointer: coarse) { cursor: $touch; }
+}
+
+///
+/// Mixin for animated cursors using a series of images.
+/// ---------------------------------------------------------------------------
+///
+/// @name cursor_animated
+/// @param {List} $images - A list of image URLs for animation frames.
+/// @param {Time} $interval ['0.5s'] - Interval between frames.
+///
+@mixin cursor_animated($images, $interval: 0.5s) {
+    $animation-frames: ();
+    $index: 0;
+
+    @each $image in $images {
+        $index: $index + 1;
+        $percentage: percentage($index / length($images));
+        $animation-frames: append($animation-frames, ($percentage $image), comma);
+    }
+
+    @keyframes cursor-animation {
+        @each $frame in $animation-frames {
+            #{nth($frame, 1)} {
+                cursor: url(#{nth($frame, 2)}), auto;
+            }
+        }
+    }
+
+    animation: cursor-animation $interval infinite;
+}
+
+// ============================================================================
+// Utility Class Generator for Common Cursors
+// ============================================================================
+
+@each $cursor in $cursors {
+    .cursor-#{$cursor} {
+        @include cursor_style($cursor);
+    }
+}
+
+// ============================================================================
+// Examples of Using Advanced Mixins
+// ============================================================================
+
+// /// Example: Advanced hover and focus with cursor change and background effect
+// .interactive-element {
+//     @include hover_focus_cursor(pointer, pointer);
+//     &:hover { background-color: lighten($primaryColor, 5%); }
+//     &:focus { background-color: lighten($primaryColor, 10%); }
+// }
+
+// /// Example: Responsive cursor handling for different devices
+// .button {
+//     @include cursor_responsive(pointer, default);
+// }
+
+// /// Example: Using animated cursor with a series of images
+// .cursor-animated-element {
+//     @include cursor_animated(('image1.png', 'image2.png', 'image3.png'));
+// }