move.gl 0.0.1

package/scss/mixins/animations/_zoom.scss

@@ -0,0 +1,166 @@
+// ============================================================================
+// 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

@@ -0,0 +1,148 @@
+///
+/// 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

@@ -0,0 +1,21 @@
+/// 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}.";
+    }
+}

package/scss/mixins/loaders/_progress.scss

@@ -0,0 +1,174 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+
+
+
+// /* Add the correct vertical alignment in Chrome, Firefox, and Opera */
+// progress {
+//     vertical-align: baseline;
+//   }
+  
+
+
+//   // Disable animation if transitions are disabled
+
+// // scss-docs-start progress-keyframes
+// @if $enable-transitions {
+//   @keyframes progress-bar-stripes {
+//     0% { background-position-x: $progress-height; }
+//   }
+// }
+// // scss-docs-end progress-keyframes
+
+// .progress,
+// .progress-stacked {
+//   // scss-docs-start progress-css-vars
+//   --#{$prefix}progress-height: #{$progress-height};
+//   @include rfs($progress-font-size, --#{$prefix}progress-font-size);
+//   --#{$prefix}progress-bg: #{$progress-bg};
+//   --#{$prefix}progress-border-radius: #{$progress-border-radius};
+//   --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
+//   --#{$prefix}progress-bar-color: #{$progress-bar-color};
+//   --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+//   --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
+//   // scss-docs-end progress-css-vars
+
+//   display: flex;
+//   height: var(--#{$prefix}progress-height);
+//   overflow: hidden; // force rounded corners by cropping it
+//   @include font-size(var(--#{$prefix}progress-font-size));
+//   background-color: var(--#{$prefix}progress-bg);
+//   @include border-radius(var(--#{$prefix}progress-border-radius));
+//   @include box-shadow(var(--#{$prefix}progress-box-shadow));
+// }
+
+// .progress-bar {
+//   display: flex;
+//   flex-direction: column;
+//   justify-content: center;
+//   overflow: hidden;
+//   color: var(--#{$prefix}progress-bar-color);
+//   text-align: center;
+//   white-space: nowrap;
+//   background-color: var(--#{$prefix}progress-bar-bg);
+//   @include transition(var(--#{$prefix}progress-bar-transition));
+// }
+
+// .progress-bar-striped {
+//   @include gradient-striped();
+//   background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
+// }
+
+// .progress-stacked > .progress {
+//   overflow: visible;
+// }
+
+// .progress-stacked > .progress > .progress-bar {
+//   width: 100%;
+// }
+
+// @if $enable-transitions {
+//   .progress-bar-animated {
+//     animation: $progress-bar-animation-timing progress-bar-stripes;
+
+//     @if $enable-reduced-motion {
+//       @media (prefers-reduced-motion: reduce) {
+//         animation: none;
+//       }
+//     }
+//   }
+// }
+
+
+
+
+// //   @import "../utilities/mixins"
+
+// // $progress-bar-background-color: $border-light !default
+// // $progress-value-background-color: $text !default
+// // $progress-border-radius: $radius-rounded !default
+
+// // $progress-indeterminate-duration: 1.5s !default
+
+// // $progress-colors: $colors !default
+
+// // .progress
+// //   @extend %block
+// //   -moz-appearance: none
+// //   -webkit-appearance: none
+// //   border: none
+// //   border-radius: $progress-border-radius
+// //   display: block
+// //   height: $size-normal
+// //   overflow: hidden
+// //   padding: 0
+// //   width: 100%
+// //   &::-webkit-progress-bar
+// //     background-color: $progress-bar-background-color
+// //   &::-webkit-progress-value
+// //     background-color: $progress-value-background-color
+// //   &::-moz-progress-bar
+// //     background-color: $progress-value-background-color
+// //   &::-ms-fill
+// //     background-color: $progress-value-background-color
+// //     border: none
+// //   // Colors
+// //   @each $name, $pair in $progress-colors
+// //     $color: nth($pair, 1)
+// //     &.is-#{$name}
+// //       &::-webkit-progress-value
+// //         background-color: $color
+// //       &::-moz-progress-bar
+// //         background-color: $color
+// //       &::-ms-fill
+// //         background-color: $color
+// //       &:indeterminate
+// //         background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+
+// //   &:indeterminate
+// //     animation-duration: $progress-indeterminate-duration
+// //     animation-iteration-count: infinite
+// //     animation-name: moveIndeterminate
+// //     animation-timing-function: linear
+// //     background-color: $progress-bar-background-color
+// //     background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
+// //     background-position: top left
+// //     background-repeat: no-repeat
+// //     background-size: 150% 150%
+// //     &::-webkit-progress-bar
+// //       background-color: transparent
+// //     &::-moz-progress-bar
+// //       background-color: transparent
+// //     &::-ms-fill
+// //       animation-name: none
+
+// //   // Sizes
+// //   &.is-small
+// //     height: $size-small
+// //   &.is-medium
+// //     height: $size-medium
+// //   &.is-large
+// //     height: $size-large
+
+// // @keyframes moveIndeterminate
+// //   from
+// //     background-position: 200% 0
+// //   to
+// //     background-position: -200% 0

package/scss/mixins/loaders/_spinner.scss

@@ -0,0 +1,101 @@
+// Copyright 2024 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@use "../variables" as *;
+@use "../mixins" as *;
+//
+// Rotating border
+//
+
+.spinner-grow,
+.spinner-border {
+    display: inline-block;
+    width: var(--#{$prefix}spinner-width);
+    height: var(--#{$prefix}spinner-height);
+    vertical-align: var(--#{$prefix}spinner-vertical-align);
+    // stylelint-disable-next-line property-disallowed-list
+    border-radius: 50%;
+    animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
+}
+
+// scss-docs-start spinner-border-keyframes
+@keyframes spinner-border {
+    to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
+}
+// scss-docs-end spinner-border-keyframes
+
+.spinner-border {
+    // scss-docs-start spinner-border-css-vars
+    --#{$prefix}spinner-width: #{$spinner-width};
+    --#{$prefix}spinner-height: #{$spinner-height};
+    --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+    --#{$prefix}spinner-border-width: #{$spinner-border-width};
+    --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+    --#{$prefix}spinner-animation-name: spinner-border;
+    // scss-docs-end spinner-border-css-vars
+
+    border: var(--#{$prefix}spinner-border-width) solid currentcolor;
+    border-right-color: transparent;
+}
+
+.spinner-border-sm {
+    // scss-docs-start spinner-border-sm-css-vars
+    --#{$prefix}spinner-width: #{$spinner-width-sm};
+    --#{$prefix}spinner-height: #{$spinner-height-sm};
+    --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
+    // scss-docs-end spinner-border-sm-css-vars
+}
+
+//
+// Growing circle
+//
+
+// scss-docs-start spinner-grow-keyframes
+@keyframes spinner-grow {
+    0% {
+        transform: scale(0);
+    }
+    50% {
+        opacity: 1;
+        transform: none;
+    }
+}
+// scss-docs-end spinner-grow-keyframes
+
+.spinner-grow {
+    // scss-docs-start spinner-grow-css-vars
+    --#{$prefix}spinner-width: #{$spinner-width};
+    --#{$prefix}spinner-height: #{$spinner-height};
+    --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
+    --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
+    --#{$prefix}spinner-animation-name: spinner-grow;
+    // scss-docs-end spinner-grow-css-vars
+
+    background-color: currentcolor;
+    opacity: 0;
+}
+
+.spinner-grow-sm {
+    --#{$prefix}spinner-width: #{$spinner-width-sm};
+    --#{$prefix}spinner-height: #{$spinner-height-sm};
+}
+
+@if $enable-reduced-motion {
+    @media (prefers-reduced-motion: reduce) {
+        .spinner-border,
+        .spinner-grow {
+        --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
+        }
+    }
+}

package/scss/mixins/loaders/circle_01.scss

@@ -0,0 +1,22 @@
+// https://cssloaders.github.io/
+
+
+.loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: #FF3D00;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

package/scss/mixins/loaders/circle_02.scss

@@ -0,0 +1,19 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+} 

package/scss/mixins/loaders/circle_03.scss

@@ -0,0 +1,29 @@
+.loader {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    position: relative;
+    animation: rotate 1s linear infinite
+}
+
+.loader::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    inset: 0px;
+    border-radius: 50%;
+    border: 5px solid #FFF;
+    animation: prixClipFix 2s linear infinite ;
+}
+
+@keyframes rotate {
+    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)}
+}