move.gl 0.0.1

package/scss/mixins/_shape.scss

@@ -0,0 +1,44 @@
+///
+/// Creates a circular element with a given size.
+/// 
+/// @name circle
+/// @param {Number|Unit} $size - The diameter of the circle.
+/// @example scss - Usage
+///   @include circle(50px);
+/// 
+@mixin circle($size) {
+    width: $size;
+    height: $size;
+    border-radius: 50%;
+}
+
+
+/// 
+/// Creates a triangle using only CSS borders.
+/// 
+/// @name triangle
+/// @param {Number|Unit} $size - The size of the triangle.
+/// @param {Color} $color - The color of the triangle.
+/// @param {String} $direction - The direction the triangle points (default: up).
+/// @example scss - Usage
+///   @include triangle(10px, #ff5722, down);
+/// 
+@mixin triangle($size, $color, $direction: up) {
+    width: 0;
+    height: 0;
+    border-style: solid;
+
+    @if $direction == up {
+        border-width: 0 $size $size $size;
+        border-color: transparent transparent $color transparent;
+    } @else if $direction == down {
+        border-width: $size $size 0 $size;
+        border-color: $color transparent transparent transparent;
+    } @else if $direction == left {
+        border-width: $size $size $size 0;
+        border-color: transparent $color transparent transparent;
+    } @else if $direction == right {
+        border-width: $size 0 $size $size;
+        border-color: transparent transparent transparent $color;
+    }
+}

package/scss/mixins/_touch.scss

@@ -0,0 +1,95 @@
+  
+
+// ============================================================================
+// Touch
+// ============================================================================
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+.touch_scroll {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+
+  // Increase Touch Area
+  // Ensure interactive elements are easy to tap by increasing their size or padding, especially for smaller elements like buttons and links.
+
+  // @mixin touch-target($min-size: 44px) {
+  //   min-width: $min-size;
+  //   min-height: $min-size;
+  //   padding: 10px;
+  //   box-sizing: border-box; // Include padding in the element's size
+  // }
+  
+  // .button, .link {
+  //   @include touch-target;
+  //   // Additional styling for buttons and links
+  // }
+  // Visual Feedback for Touch
+  // Provide visual feedback for touch interactions such as color change, scale, or shadow to indicate an active state.
+  
+
+  // @mixin touch-feedback {
+  //   transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
+  
+  //   &:active {
+  //     background-color: darken($primary-color, 10%);
+  //     transform: scale(0.95);
+  //     box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+  //   }
+  // }
+  
+  // .interactive-element {
+  //   @include touch-feedback;
+  //   // Base styling for the element
+  // }
+  // Hover States with Touch Consideration
+  // Since touch devices generally don't support hover in the traditional sense, ensure that styles relying on hover also have equivalent styles for focus or active states to accommodate touch interactions.
+  
+
+  // @mixin hover-touch-styles {
+  //   &:hover, &:focus, &:active {
+  //     // Shared styles for hover, focus, and active states
+  //     background-color: lighten($secondary-color, 5%);
+  //     outline: none; // Remove focus outline if not desired
+  //   }
+  // }
+  
+  // .interactive-element {
+  //   @include hover-touch-styles;
+  //   // Base styling
+  // }
+  // Disable Zoom on Form Element Focus
+  // On touch devices, focusing on an input field can cause the viewport to zoom. You can control this behavior with the font-size property, ensuring it's above the threshold that triggers zooming, typically around 16px.
+  
+
+  // @mixin no-zoom-input {
+  //   font-size: 16px; // Prevent zoom on focus on most mobile browsers
+  //   &:focus {
+  //     outline: none; // Optionally remove the outline
+  //   }
+  // }
+  
+  // input, select, textarea {
+  //   @include no-zoom-input;
+  // }
+  // Gestures and Swipes
+  // For elements that use swipe gestures, ensure that the touch area is large enough and that the visual cues indicate swipeability.
+  
+
+  // .swipeable-element {
+  //   @include touch-target(60px); // Larger touch target for easier swiping
+  //   // Additional visual cues to indicate swipeability
+  // }
+  // Responsive Touch Styles
+  // Use media queries within your SCSS to apply touch-specific styles only on devices that support touch, keeping desktop styles unaffected.
+  
+
+  // @media (hover: none) and (pointer: coarse) {
+  //   .button, .link {
+  //     @include touch-target(50px); // Larger touch targets for touch devices
+  //     @include touch-feedback; // Visual feedback on touch
+  //   }
+  // }

package/scss/mixins/animations/--hover.scss

@@ -0,0 +1,107 @@
+
+
+// ============================================================================
+// icon.gl | Animations
+// ============================================================================
+
+@use "../dev" as *;
+@use "../variables" as *;
+@use "base" as *;
+
+
+// @mixin hover-animation($transition-duration: 0.3s) {
+//     transition: all $transition-duration ease;
+//     &:hover {
+//         transform: scale(1.1);
+//     }
+// }
+
+// .hover-grow {
+//     @include hover-animation();
+// }
+
+// Hover
+// ----------------------------------------------------------------------------
+
+@mixin animate_hover($scale: 1.05, $duration: 0.3s, $timing-function: ease-in-out) {
+    transition: transform $duration $timing-function;
+    &:hover {
+        transform: scale($scale);
+    }
+}
+
+.animate_hover {
+    @include animate_hover();
+}
+
+
+// Hover Bounce
+// ----------------------------------------------------------------------------
+
+@mixin animate_hover_bounce($distance: 10px, $duration: 0.3s) {
+    transition: transform $duration ease-in-out;
+    &:hover {
+        animation-name: animate_bounce;
+        animation-duration: $duration;
+        animation-fill-mode: forwards;
+        @keyframes animate_bounce {
+            0% { transform: translateY(0); }
+            100% { transform: translateY(-$distance); }
+        }
+    }
+}
+
+.animate_hover_bounce {
+    @include animate_hover_bounce();
+}
+
+
+
+
+// Hover Scale
+// ----------------------------------------------------------------------------
+
+@mixin animate_hover_scale($scale: 1.1, $duration: 0.3s) {
+    transition: transform $duration ease-in-out;
+    &:hover {
+        transform: scale($scale);
+    }
+}
+
+.animate_hover_scale {
+    @include animate_hover_scale();
+}
+
+// Hover Rotate
+// ----------------------------------------------------------------------------
+
+@mixin animate_hover_rotate($angle: 15deg, $duration: 0.5s) {
+    transition: transform $duration ease-in-out;
+    &:hover {
+        transform: rotate($angle);
+    }
+}
+
+.animate_hover_rotate {
+    @include animate_hover_rotate();
+}
+
+
+
+
+// Hover Drop Animation:
+// ----------------------------------------------------------------------------
+
+@mixin animate_hover_drop($distance: 5px, $duration: 0.3s) {
+    transition: transform $duration ease-in-out;
+    &:hover {
+        transform: translateY($distance);
+    }
+}
+
+.animate_hover_drop {
+    @include animate_hover_drop();
+}
+
+
+

package/scss/mixins/animations/_base.scss

@@ -0,0 +1,337 @@
+// ============================================================================
+// Poster
+// ============================================================================
+
+////
+/// 
+/// Base 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 *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+///
+/// Base Animation Mixin
+/// This mixin provides a base structure for defining animations, allowing
+/// customization of the name, duration, timing function, iteration count,
+/// delay, and direction.
+/// 
+/// @name animate_base
+/// @param {String} $name [none] - The name of the animation.
+/// @param {Number|String} $duration [$animate_base_duration] - The duration of the animation.
+/// @param {String} $timing_function [$animate_base_timing_function] - The timing function for the animation.
+/// @param {Number|String} $iteration_count [$animate_base_iteration_count] - The number of iterations the animation will run.
+/// @param {Number|String} $delay [$animate_base_delay] - The delay before the animation starts.
+/// @param {String} $direction [$animate_base_direction] - The direction in which the animation is played.
+///
+@mixin animate_base(
+    $name: none,
+    $duration: $animate_base_duration,
+    $timing_function: $animate_base_timing_function,
+    $iteration_count: $animate_base_iteration_count,
+    $delay: $animate_base_delay,
+    $direction: $animate_base_direction,
+) {
+    // animation: $name $duration $timing_function $iteration_count $delay $direction;
+    animation-name: $name;
+    animation-duration: $duration;
+    animation-timing-function: $timing_function;
+    animation-iteration-count: $iteration_count;
+    animation-delay: $delay;
+    animation-direction: $direction;
+}
+
+// General Animation Classes
+// ----------------------------------------------------------------------------
+
+// // Base classes for animations
+// [class^="#{$icongl_prefix}animate_"],
+// [class*=" #{$icongl_prefix}animate_"] {
+//     // Base animation properties
+//     display: inline-block;
+//     backface-visibility: hidden;
+//     perspective: 1000px; // Improve 3D animations
+// }
+
+// Reduced Motion Preference
+// ----------------------------------------------------------------------------
+
+// if agent or operating system prefers reduced motion, disable animations
+// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/
+// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
+
+///
+/// Reduced Motion
+/// This media query applies styles that reduce motion for users who have
+/// enabled the "prefers-reduced-motion" setting. Animations and transitions
+/// are effectively disabled to improve accessibility.
+/// @media (prefers-reduced-motion: reduce)
+///
+@media (prefers-reduced-motion: reduce) {
+
+    // Apply to specific animated classes
+    .animate_beat,
+    .animate_bounce,
+    .animate_fade,
+    .animate_beat_fade,
+    .animate_flip,
+    .animate_pulse,
+    .animate_shake,
+    .animate_spin,
+    .animate_spin-pulse {
+        animation-delay: -1ms;
+        animation-duration: 1ms;
+        animation-iteration-count: 1;
+        transition-delay: 0s;
+        transition-duration: 0s;
+    }
+
+    // Global animation disabling
+    .animation {
+        animation: none;
+        transition: none;
+    }
+}
+
+
+@media (prefers-reduced-motion: reduce) {
+    // Target all elements with a class starting with 'animate_'
+    [class*="animate_"] {
+        // Reset basic animation and transition properties
+        animation: none;
+        transition: none;
+    }
+
+    // Alternatively, if animations are tied to a specific attribute
+    [data-animation] {
+        // Apply the same reset
+        animation: none;
+        transition: none;
+    }
+
+    // Additional option for targeting any animated element
+    // This targets any element with animation or transition properties set
+   /// {
+        animation: none !important;
+        transition: none !important;
+    }
+}
+
+
+
+
+
+
+
+// .animated {
+//     -webkit-animation-duration: 3s;
+//     animation-duration: 3s;
+//     -webkit-animation-fill-mode: both;
+//     animation-fill-mode: both;
+//   }
+  
+//   .animated-middle {
+//     -webkit-animation-duration: 1.2s;
+//     animation-duration: 1.2s;
+//     -webkit-animation-fill-mode: both;
+//     animation-fill-mode: both;
+//   }
+  
+//   .animated-quick {
+//     -webkit-animation-duration: 0.6s;
+//     animation-duration: 0.6s;
+//     -webkit-animation-fill-mode: both;
+//     animation-fill-mode: both;
+//   }
+  
+//   .animated.infinite {
+//     -webkit-animation-iteration-count: infinite;
+//     animation-iteration-count: infinite;
+//   }
+  
+
+
+
+// Animations
+//
+
+
+
+
+///
+/// Hover Opacity Transition Mixin
+/// Provides a hover effect that changes the opacity of an element
+/// with a transition.
+/// @name transition_hover_opacity
+///
+@mixin transition_hover_opacity {
+    @include transition_duration_00;
+    opacity: 1.00; 
+    :hover {
+        @include transition_duration_00;
+        opacity: 0.50; 
+    } 
+}
+
+///
+/// Transition Mixin
+/// Provides a basic transition effect with a customizable duration.
+/// @name transition_duration
+/// @param {Number|String} $val - The duration for the transition.
+///
+@mixin transition_duration($val) {
+    transition:                     all $val ease-in-out;
+    -moz-transition:                all $val ease-in-out;
+    -ms-transition:                 all $val ease-in-out;
+    -o-transition:                  all $val ease-in-out;
+    -webkit-transition:             all $val ease-in-out;
+    transition-duration:            all $val ease-in-out;
+    -moz-transition-duration:       all $val ease-in-out;
+    -ms-transition-duration:        all $val ease-in-out;
+    -o-transition-duration:         all $val ease-in-out;
+    -webkit-transition-duration:    all $val ease-in-out;
+}
+
+
+///
+/// Quick Transition Mixin
+/// Provides a quick transition effect with a pre-defined duration.
+/// @name transition_duration_00
+///
+@mixin transition_duration_00 {
+    @include transition_duration($transition_duration_00);
+    // transition:                     all $transition_duration_00 ease-in-out;
+    // -moz-transition:                all $transition_duration_00 ease-in-out;
+    // -ms-transition:                 all $transition_duration_00 ease-in-out;
+    // -o-transition:                  all $transition_duration_00 ease-in-out;
+    // -webkit-transition:             all $transition_duration_00 ease-in-out;
+    // transition-duration:            all $transition_duration_00 ease-in-out;
+    // -moz-transition-duration:       all $transition_duration_00 ease-in-out;
+    // -ms-transition-duration:        all $transition_duration_00 ease-in-out;
+    // -o-transition-duration:         all $transition_duration_00 ease-in-out;
+    // -webkit-transition-duration:    all $transition_duration_00 ease-in-out;  
+}
+
+///
+/// Medium Transition Mixin
+/// Provides a medium-speed transition effect with a pre-defined duration.
+/// @name transition_duration_01
+///
+@mixin transition_duration_01 {
+    @include transition_duration($transition_duration_01);
+    // transition:                     all $transition_duration_01 ease-in-out;
+    // -moz-transition:                all $transition_duration_01 ease-in-out;
+    // -ms-transition:                 all $transition_duration_01 ease-in-out;
+    // -o-transition:                  all $transition_duration_01 ease-in-out;
+    // -webkit-transition:             all $transition_duration_01 ease-in-out;
+    // transition-duration:            all $transition_duration_01 ease-in-out;
+    // -moz-transition-duration:       all $transition_duration_01 ease-in-out;
+    // -ms-transition-duration:        all $transition_duration_01 ease-in-out;
+    // -o-transition-duration:         all $transition_duration_01 ease-in-out;
+    // -webkit-transition-duration:    all $transition_duration_01 ease-in-out;  
+}
+
+///
+/// Long Transition Mixin
+/// Provides a longer transition effect with a pre-defined duration.
+/// @name transition_duration_02
+///
+@mixin transition_duration_02 {
+    @include transition_duration($transition_duration_02);
+    // transition:                     all $transition_duration_02 ease-in-out;
+    // -moz-transition:                all $transition_duration_02 ease-in-out;
+    // -ms-transition:                 all $transition_duration_02 ease-in-out;
+    // -o-transition:                  all $transition_duration_02 ease-in-out;
+    // -webkit-transition:             all $transition_duration_02 ease-in-out;
+    // transition-duration:            all $transition_duration_02 ease-in-out;
+    // -moz-transition-duration:       all $transition_duration_02 ease-in-out;
+    // -ms-transition-duration:        all $transition_duration_02 ease-in-out;
+    // -o-transition-duration:         all $transition_duration_02 ease-in-out;
+    // -webkit-transition-duration:    all $transition_duration_02 ease-in-out;  
+}
+
+///
+/// Extra Long Transition Mixin
+/// Provides an extra-long transition effect with a pre-defined duration.
+/// @name transition_duration_03
+///
+@mixin transition_duration_03 {
+    @include transition_duration($transition_duration_03);
+    // transition:                     all $transition_duration_03 ease-in-out;
+    // -moz-transition:                all $transition_duration_03 ease-in-out;
+    // -ms-transition:                 all $transition_duration_03 ease-in-out;
+    // -o-transition:                  all $transition_duration_03 ease-in-out;
+    // -webkit-transition:             all $transition_duration_03 ease-in-out;
+    // transition-duration:            all $transition_duration_03 ease-in-out;
+    // -moz-transition-duration:       all $transition_duration_03 ease-in-out;
+    // -ms-transition-duration:        all $transition_duration_03 ease-in-out;
+    // -o-transition-duration:         all $transition_duration_03 ease-in-out;
+    // -webkit-transition-duration:    all $transition_duration_03 ease-in-out;  
+}
+
+///
+/// Maximum Duration Transition Mixin
+/// Provides a maximum duration transition effect with a pre-defined duration.
+/// @name transition_duration_04
+///
+@mixin transition_duration_04 {
+    @include transition_duration($transition_duration_04);
+    // transition:                     all $transition_duration_04 ease-in-out;
+    // -moz-transition:                all $transition_duration_04 ease-in-out;
+    // -ms-transition:                 all $transition_duration_04 ease-in-out;
+    // -o-transition:                  all $transition_duration_04 ease-in-out;
+    // -webkit-transition:             all $transition_duration_04 ease-in-out;
+    // transition-duration:            all $transition_duration_04 ease-in-out;
+    // -moz-transition-duration:       all $transition_duration_04 ease-in-out;
+    // -ms-transition-duration:        all $transition_duration_04 ease-in-out;
+    // -o-transition-duration:         all $transition_duration_04 ease-in-out;
+    // -webkit-transition-duration:    all $transition_duration_04 ease-in-out;
+}
+
+
+
+///
+/// Generates a keyframe animation for elements.
+/// 
+/// @name keyframe-animation
+/// @param {String} $name - The name of the animation.
+/// @param {Map} $keyframes - A map of keyframes, where the key is the percentage and the value is the CSS properties.
+/// @example scss - Usage
+///   @include keyframe-animation('slide-in', (0%: (transform: translateX(-100%)), 100%: (transform: translateX(0))));
+@mixin keyframe_animation(
+    $name,
+    $keyframes
+) {
+    @keyframes #{$name} {
+        @each $percentage, $properties in $keyframes {
+            #{$percentage} {
+                @each $property, $value in $properties {
+                    #{$property}: #{$value};
+                }
+            }
+        }
+    }
+}