move.gl 0.0.1

package/scss/mixins/loaders/circle_inner_01.scss

@@ -0,0 +1,33 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite
+}
+
+.loader::before , .loader::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #FFF;
+    animation: prixClipFix 2s linear infinite ;
+}
+
+.loader::after{
+    transform: rotate3d(90, 90, 0, 180deg );
+    border-color: #FF3D00;
+}
+
+@keyframes rotate {
+    0%   {transform: rotate(0deg)}
+    100%   {transform: rotate(360deg)}
+}
+
+@keyframes prixClipFix {
+    0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+    50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+    75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+}

package/scss/mixins/loaders/circle_inner_02.scss

@@ -0,0 +1,33 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite
+}
+
+  .loader::before , .loader::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #FFF;
+    animation: prixClipFix 2s linear infinite ;
+  }
+  .loader::after{
+    inset: 8px;
+    transform: rotate3d(90, 90, 0, 180deg );
+    border-color: #FF3D00;
+  }
+
+  @keyframes rotate {
+    0%   {transform: rotate(0deg)}
+    100%   {transform: rotate(360deg)}
+  }
+
+  @keyframes prixClipFix {
+      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+      75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+  }

package/scss/mixins/loaders/circle_inner_03.scss

@@ -0,0 +1,34 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite
+  }
+  .loader::before , .loader::after {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #FFF;
+    animation: prixClipFix 2s linear infinite ;
+  }
+  .loader::after{
+    border-color: #FF3D00;
+    animation: prixClipFix 2s linear infinite , rotate 0.5s linear infinite reverse;
+    inset: 6px;
+  }
+
+  @keyframes rotate {
+    0%   {transform: rotate(0deg)}
+    100%   {transform: rotate(360deg)}
+  }
+
+  @keyframes prixClipFix {
+      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
+      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
+      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
+      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
+      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
+  }

package/scss/mixins/mouse/_cursor.scss

@@ -0,0 +1,182 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Cursors Mixin Module
+/// ===========================================================================
+///
+/// This module provides a comprehensive set of mixins for managing cursor
+/// styles in CSS. It 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 Mouse
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../mixins" as *;
+
+
+
+
+
+
+
+///
+/// Mixin for applying a cursor style using predefined cursor types from the map.
+/// 
+/// @mixin 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.
+/// 
+/// @mixin 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_pointer { @include cursor_style('pointer'); }
+@mixin cursor_text { @include cursor_style('text'); }
+@mixin cursor_disabled { @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'); }
+
+// ============================================================================
+// Advanced Mixins
+// ============================================================================
+
+///
+/// Mixin for hover and focus cursor effects.
+/// 
+/// @mixin 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.
+/// 
+/// @mixin 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.
+/// 
+/// @mixin 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
+// ============================================================================
+
+// $cursors: ('pointer', 'text', 'wait', 'crosshair', 'not-allowed', 'zoom-in', 'grab', 'grabbing');
+
+@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'));
+// }

package/scss/mixins/mouse/_pointer.scss

@@ -0,0 +1,258 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Pointers Mixin Module
+/// ===========================================================================
+///
+/// This module provides mixins for managing pointer events in CSS, allowing 
+/// for easy application of the `pointer-events` property with support for both 
+/// global and keyword values. These mixins are useful for managing user 
+/// interactions on various elements, including SVGs and standard HTML 
+/// elements. The module includes simplified mixins for frequently used 
+/// pointer-event states and utility mixins to handle hover styles based on 
+/// pointer-event settings.
+/// 
+/// 
+/// @group Mouse
+/// @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 "../mixins" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Mixin for setting pointer-events property with support for both global and 
+/// keyword values. This mixin can be used to enable or disable pointer events 
+/// on an element.
+///
+/// @name pointer_events
+/// @param {String} $state ['auto'] - The desired pointer-events state (e.g., 'auto', 'none', 'inherit').
+/// @example scss - Usage
+///   .interactive-element { @include pointer_events(auto); } // Enable pointer events
+///   .non-interactive-element { @include pointer_events(none); } // Disable pointer events
+///
+@mixin pointer_events($state: auto) {
+    pointer-events: $state;
+}
+
+
+
+// ============================================================================
+// Global Pointer Event Values
+// ============================================================================
+
+///
+/// Mixin for setting pointer-events to inherit from parent element.
+/// 
+/// @name pointer_inherit
+/// @example scss - Usage
+///   .element { @include pointer_inherit; } // Inherits pointer-events from parent
+///
+@mixin pointer_inherit { 
+    @include pointer_events(inherit); 
+}
+
+///
+/// Mixin for setting pointer-events to initial value.
+/// 
+/// @name pointer_initial
+/// @example scss - Usage
+///   .element { @include pointer_initial; } // Sets pointer-events to initial
+///
+@mixin pointer_initial { 
+    @include pointer_events(initial); 
+}
+
+///
+/// Mixin for setting pointer-events to revert.
+/// 
+/// @name pointer_revert
+/// @example scss - Usage
+///   .element { @include pointer_revert; } // Reverts pointer-events to previous value
+///
+@mixin pointer_revert { 
+    @include pointer_events(revert); 
+}
+
+///
+/// Mixin for setting pointer-events to revert-layer.
+/// 
+/// @name pointer_revert-layer
+/// @example scss - Usage
+///   .element { @include pointer_revert-layer; } // Sets pointer-events to revert-layer
+///
+@mixin pointer_revert-layer { 
+    @include pointer_events(revert-layer); 
+}
+
+///
+/// Mixin for setting pointer-events to unset.
+/// 
+/// @name pointer_unset
+/// @example scss - Usage
+///   .element { @include pointer_unset; } // Sets pointer-events to unset
+///
+@mixin pointer_unset { 
+    @include pointer_events(unset); 
+}
+
+// ============================================================================
+// Keyword Pointer Event Values
+// ============================================================================
+
+///
+/// Mixin for setting pointer-events to auto, enabling all interactions.
+/// 
+/// @name pointer_auto
+/// @example scss - Usage
+///   .element { @include pointer_auto; } // Enables pointer events
+///
+@mixin pointer_auto { 
+    @include pointer_events(auto); 
+}
+
+///
+/// Mixin for setting pointer-events to none, disabling all interactions.
+/// 
+/// @name pointer_none
+/// @example scss - Usage
+///   .element { @include pointer_none; } // Disables pointer events
+///
+@mixin pointer_none { 
+    @include pointer_events(none); 
+}
+
+///
+/// Mixin for setting pointer-events to all (SVG Only).
+/// 
+/// @name pointer_all
+/// @example scss - Usage
+///   .svg-element { @include pointer_all; } // Enables all pointer events on SVG
+///
+@mixin pointer_all { 
+    @include pointer_events(all); 
+}
+
+// Additional SVG-specific pointer-events mixins
+
+@mixin pointer_fill { 
+    @include pointer_events(fill); 
+}
+
+@mixin pointer_painted { 
+    @include pointer_events(painted); 
+}
+
+@mixin pointer_stroke { 
+    @include pointer_events(stroke); 
+}
+
+@mixin pointer_visible { 
+    @include pointer_events(visible); 
+}
+
+@mixin pointer_visible-fill { 
+    @include pointer_events(visibleFill); 
+}
+
+@mixin pointer_visible-painted { 
+    @include pointer_events(visiblePainted); 
+}
+
+@mixin pointer_visible-stroke { 
+    @include pointer_events(visibleStroke); 
+}
+
+// ============================================================================
+// Utility Mixins
+// ============================================================================
+
+///
+/// Mixin for applying hover styles only when pointer events are enabled.
+/// This ensures hover styles do not apply if the element is non-interactive.
+/// 
+/// @name pointer_hover_check
+/// @example scss - Usage
+///   .interactive-element {
+///     @include pointer_hover_check {
+///       color: red;
+///     }
+///   }
+///
+@mixin pointer_hover_check {
+    @if pointer-events != 'none' {
+        &:hover { 
+            @content; 
+        }
+    }
+}
+
+///
+/// Simplified mixin for commonly used global pointer-events values.
+/// Accepts 'inherit', 'initial', 'revert', 'revert-layer', and 'unset'.
+/// 
+/// @name pointer_global
+/// @param {String} $value - The global value for pointer-events.
+/// @example scss - Usage
+///   .element { @include pointer_global(inherit); }
+///
+@mixin pointer_global($value) {
+    @include pointer_events($value);
+}
+
+///
+/// Simplified mixin for commonly used keyword pointer-events values.
+/// Accepts 'auto', 'none', 'all' and SVG-specific values.
+/// 
+/// @name pointer_keyword
+/// @param {String} $value - The keyword value for pointer-events.
+/// @example scss - Usage
+///   .element { @include pointer_keyword(auto); }
+///
+@mixin pointer_keyword($value) {
+    @include pointer_events($value);
+}
+
+
+
+
+
+
+
+// ============================================================================
+// Predefined Classes for Common Use Cases
+// ============================================================================
+
+.interactive-element {
+    @include pointer_auto; // Enables pointer events
+}
+  
+.non-interactive-element {
+    @include pointer_none; // Disables pointer events
+}
+  
+.custom-element {
+    @include pointer_visible-painted; // Applies visiblePainted for SVG elements
+}
+

package/scss/mixins/scroll/_scroll.scss

@@ -0,0 +1,104 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Scroll Mixins
+/// ===========================================================================
+///
+/// This module provides mixins to enable smooth scrolling and scroll snapping 
+/// features for containers, enhancing user interaction and navigation within 
+/// scrollable elements.
+///
+/// 
+/// 
+/// @group Mouse
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @todo None
+/// @see https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+/// @access public
+/// 
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+/// 
+/// Mixin to enable smooth scrolling for a container.
+/// Provides a smooth scroll behavior for elements that overflow.
+/// 
+/// @mixin scroll_smooth
+/// @param {Boolean} $enable [true] - Enables smooth scrolling if true, disables otherwise.
+/// @param {Boolean} $touch_scrolling [true] - Enables WebKit touch scrolling if true.
+/// 
+/// @example scss - Usage
+///   .scrollable-container {
+///       @include scroll_smooth(true, true);
+///   }
+/// 
+@mixin scroll_smooth(
+    $enable: true,
+    $touch_scrolling: true
+) {
+    @if $enable {
+        scroll-behavior: smooth;
+    } @else {
+        scroll-behavior: auto;
+    }
+
+    @if $touch_scrolling {
+        -webkit-overflow-scrolling: touch;
+    } @else {
+        -webkit-overflow-scrolling: auto;
+    }
+}
+
+/// 
+/// Mixin to set up scroll snapping for a container.
+/// Configures scroll snapping for elements, useful for creating carousels or 
+/// step-by-step guides with smooth navigation between sections.
+/// 
+/// @mixin scroll_snap
+/// @param {String} $type [y mandatory] - The scroll snapping type ('x' or 'y', and 'mandatory' or 'proximity').
+/// @param {String} $align [start] - Alignment of the snapped items (start, center, end, or none).
+/// @param {String} $stop [normal] - Specifies the scroll-snap-stop behavior (normal, always).
+/// 
+/// @example scss - Usage
+///   .snap-container {
+///       @include scroll_snap('x mandatory', 'center', 'always');
+///   }
+/// 
+@mixin scroll_snap(
+    $type: y mandatory,
+    $align: start,
+    $stop: normal
+) {
+    scroll-snap-type: $type;
+    scroll-snap-align: $align;
+    scroll-snap-stop: $stop;
+}
+
+
+/// Example usage
+.scrollable-container {
+    @include scroll_smooth(); // Enables smooth scrolling with default settings
+}
+
+.snap-container {
+    @include scroll_snap(x mandatory, center); // Sets up horizontal snapping to center
+}