move.gl 0.0.1 → 0.0.2

package/scss/mixins/loaders/_progress.scss

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

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

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

@@ -1,19 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-.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)}
-}

package/scss/mixins/loaders/circle_inner_01.scss

@@ -1,33 +0,0 @@
-.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

@@ -1,33 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-.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/scroll/_scroll.scss

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

package/scss/mixins/transforms/_index.scss

@@ -1,23 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Transforms Mixin Module
-/// ===========================================================================
-/// This module provides reusable mixins for applying transformations such as 
-/// rotations and flips to elements. It includes mixins for rotating elements 
-/// by a specified degree, as well as predefined classes for common rotation 
-/// angles. This module is designed to facilitate the application of CSS 
-/// transforms in a consistent and maintainable manner throughout your project.
-/// 
-/// @group Transforms
-/// @author Scape Agency
-/// @link https://move.gl
-/// @since 0.1.0 initial release
-/// @todo None
-/// @access public
-/// 
-////
-

package/scss/mixins/transforms/_matrix.scss

@@ -1 +0,0 @@
-https://developer.mozilla.org/en-US/docs/Web/CSS/transform

package/scss/mixins/transitions/_transition.scss

@@ -1,13 +0,0 @@
-/// 
-/// Applies a transition to an element.
-/// 
-/// @name transition
-/// @param {String} $property - The CSS property to transition.
-/// @param {String} $duration - The duration of the transition (default: 0.3s).
-/// @param {String} $timing-function - The timing function of the transition (default: ease).
-/// @example scss - Usage
-///   @include transition('all', '0.3s', 'ease-in-out');
-/// 
-@mixin transition($property, $duration: 0.3s, $timing-function: ease) {
-    transition: #{$property} #{$duration} #{$timing-function};
-}