move.gl 0.0.1 → 0.0.2

package/scss/functions/scenes/_index.scss

@@ -1,20 +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.
-
-
-// Scenes
-// ============================================================================
-
-
-// @forward "bubble";

package/scss/keyframes/_beat.scss

@@ -1,26 +0,0 @@
-// ============================================================================
-// Beat
-// ============================================================================
-
-@keyframes animate_beat {
-    0%, 90% { transform: scale($animate-scale-base); }
-    45% { transform: scale($animate-scale-beat); }
-}
-
-@keyframes animate_beat_fade {
-    0%, 100% {
-        opacity: $animate-opacity-fade;
-        transform: scale($animate-scale-base);
-    }
-    50% {
-        opacity: 1;
-        transform: scale($animate-scale-beat-fade);
-    }
-}
-
-@keyframes animate_beat_double {
-    0%, 100% { transform: scale($animate-scale-base); }
-    25% { transform: scale($animate-scale-beat-double-small); }
-    50% { transform: scale($animate-scale-beat-double-large); }
-    75% { transform: scale($animate-scale-beat-double-small); }
-}

package/scss/maps/_mouse.scss

@@ -1,96 +0,0 @@
-// ============================================================================
-// Poster
-// ============================================================================
-
-////
-/// 
-/// Cursors Maps Module
-/// ===========================================================================
-/// 
-/// @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
-// ============================================================================
-
-
-
-// ============================================================================
-// Maps
-// ============================================================================
-
-/// 
-/// Cursor Styles Map
-/// ---------------------------------------------------------------------------
-///
-/// A map defining standard cursor styles for easy reference and extensibility.
-/// Allows for uniform application of cursor styles across elements.
-///
-$cursor_styles: (
-
-    // General
-    "auto": auto,                   // Default cursor
-    "default": default,             // The platform-dependent default cursor. Typically an arrow.
-    "none": none,                   // No cursor is rendered.
-
-    // Links & Status
-    "context-menu": context-menu,   // Indicates a context menu is available
-    "help": help,                   // Can be used for elements that provide additional information
-    "pointer": pointer,             // Indicates a link. Typically an image of a pointing hand.
-    "progress": progress,           // Indicates progress
-    "wait": wait,                   // Indicates a waiting state, often used for loading
-
-    // Selection
-    "cell": cell,                   // Indicates a cell or selectable item
-    "crosshair": crosshair,         // Useful for precision elements, like in a drawing tool
-    "text": text,                   // The text can be selected. Typically the shape of an I-beam.
-    "vertical-text": vertical-text, // The vertical text can be selected. Typically the shape of a sideways I-beam.
-
-    // Drag & drop
-    "alias": alias,                 // Can indicate an alias of/shortcut to something
-    "copy": copy,                   // Indicates something can be copied
-    "move": move,                   // Something is to be moved.
-    "no-drop": no-drop,             // Indicates that dropping is not allowed
-    "not-allowed": not-allowed,     // Indicates an action is not allowed
-    "grab": grab,                   // Something can be grabbed (dragged to be moved).
-    "grabbing": grabbing,           // Something is being grabbed (dragged to be moved).
-
-    // Resizing & Scrolling
-    "all-scroll": all-scroll,       // Indicates scrolling in any direction
-    "col-resize": col-resize,       // Indicates that a column can be resized
-    "row-resize": row-resize,       // Indicates that a row can be resized
-    "n-resize": n-resize,           // thin long arrow pointing towards the top    Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
-    // In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize.
-    "e-resize": e-resize,           // thin long arrow pointing towards the right
-    "s-resize": s-resize,           // thin long arrow pointing down
-    "w-resize": w-resize,           // thin long arrow pointing towards the left
-    "ne-resize": ne-resize,         // thin long arrow pointing top-right
-    "nw-resize": nw-resize,         // thin long arrow pointing top-left
-    "se-resize": se-resize,         // thin long arrow pointing bottom-right
-    "sw-resize": sw-resize,
-    "ew-resize": ew-resize,         // thin long arrow pointing left and right    Bidirectional resize cursor.
-    "ns-resize": ns-resize,         // thin long arrow pointing up and down
-    "nesw-resize": nesw-resize,     // thin long arrow pointing both to the top-right and bottom-left
-    "nwse-resize": nwse-resize,
-
-    // Zooming
-    "zoom-in": zoom-in, // Indicates that something can be zoomed in
-    "zoom-out": zoom-out, // Indicates that something can be zoomed out
-
-    // Additions start here
-    "disabled": not-allowed,
-    "resize-vertical": ns-resize, // For vertical resizing
-    "resize-horizontal": ew-resize, // For horizontal resizing
-    "resize-diagonal-1": nwse-resize, // For diagonal resizing (top-left to bottom-right)
-    "resize-diagonal-2": nesw-resize, // For diagonal resizing (top-right to bottom-left)
-
-);

package/scss/mixins/_hover.scss

@@ -1,51 +0,0 @@
-/// 
-/// Scales an element when hovered, with a smooth transition.
-/// 
-/// @name hover_scale
-/// @param {Number} $scale-factor - The scale factor on hover (default: 1.05).
-/// @param {Number|Unit} $duration - The duration of the scale transition (default: 0.3s).
-/// @example scss - Usage
-///   @include hover_scale(1.1, 0.4s);
-/// 
-@mixin hover_scale($scale-factor: 1.05, $duration: 0.3s) {
-    transition: transform #{$duration} ease-in-out;
-
-    &:hover {
-        transform: scale(#{$scale-factor});
-    }
-}
-
-/// 
-/// Applies a scaling effect to an element on hover.
-/// 
-/// @name hover_scale
-/// @param {Number} $scale - The scaling factor (default: 1.1).
-/// @param {Number|Unit} $duration - The duration of the transition (default: 0.3s).
-/// @example scss - Usage
-///   @include hover_scale(1.2, 0.5s);
-/// 
-@mixin hover_scale($scale: 1.1, $duration: 0.3s) {
-    transition: transform $duration ease-in-out;
-
-    &:hover {
-        transform: scale($scale);
-    }
-}
-
-/// 
-/// Applies a smooth transition effect on hover for specified properties.
-/// 
-/// @name hover_transition
-/// @param {List} $properties - List of properties to transition (default: all).
-/// @param {Number|Unit} $duration - Duration of the transition (default: 0.3s).
-/// @param {String} $timing-function - Timing function for the transition (default: ease).
-/// @example scss - Usage
-///   @include hover_transition(color, background-color, 0.5s, ease-in-out);
-/// 
-@mixin hover_transition($properties: all, $duration: 0.3s, $timing-function: ease) {
-    transition: #{$properties} #{$duration} #{$timing-function};
-    
-    &:hover {
-        @content;
-    }
-}

package/scss/mixins/_selection.scss

@@ -1,321 +0,0 @@
-
-
-
-// ============================================================================
-// Selection
-// ============================================================================
-
-
-@use "../variables" as *;
-@use "../mixins" as *;
-
-
-@mixin selection {
-    ::selection { @content; }    /*** Works on common browsers ***/
-    ::-moz-selection { @content; }   /*** Works on common browsers ***/
-    ::-o-selection { @content; }   /***For Other Browsers ***/
-    ::-webkit-selection { @content; }   /*** For Webkit ***/
-    ::-ms-selection { @content; }
-}
-
-@include selection {
-    background-color: $color_04;
-    color: $color_02;
-}
-
-
-::-moz-selection
-{
-    color: var(--ptf-color-white);
-    background-color: var(--ptf-accent-1);
-}
-
-::selection
-{
-    color: var(--ptf-color-white);
-    background-color: var(--ptf-accent-1);
-}
-
-::-moz-selection { background: #272727; color: #fff; }
-	 ::selection { background: #272727; color: #fff; }
-
-
-    
-
-
-
-
-// SCSS Mixin for Custom Text Selection
-// ----------------------------------------------------------------------------
-// conditionalThis mixin allows you to define custom colors for text selection,
-// including the background color of the selection and the color of the text
-// within the selection.
-
-@mixin custom-selection($bg-color: #b3d4fc, $text-color: #fff) {
-    &::selection {
-        background-color: $bg-color; // Color of the background
-        color: $text-color; // Color of the text
-    }
-    
-    // For compatibility with Mozilla Firefox
-    &::-moz-selection {
-        background-color: $bg-color; // Color of the background
-        color: $text-color; // Color of the text
-    }
-}
-
-// Usage Example
-// You can use this mixin to apply custom selection styles globally or to specific elements.
-
-// Global Custom Selection
-// ----------------------------------------------------------------------------
-// To apply a custom selection style globally, you can include the mixin
-// within the html or body selector.
-
-
-body {
-    @include custom-selection(#009688, #ffffff); // Teal background with white text
-}
-// Element-Specific Custom Selection
-// To apply custom selection styles to specific elements, include the mixin within the specific element's selector.
-
-
-p.custom-text-selection {
-    @include custom-selection(#ffeb3b, #000); // Yellow background with black text for paragraphs with the .custom-text-selection class
-}
-// Applying to Multiple Elements
-// You can also apply the mixin to multiple elements by grouping selectors.
-
-
-h1, h2, .highlight-text {
-  @include custom-selection(#673ab7, #fff); // Deep purple background with white text for all h1, h2, and .highlight-text class elements
-}
-
-
-// Conditional Text Selection Based on Parent or State
-// You can conditionally apply text selection styles based on a parent element or a specific state, such as a class being applied to a parent element. This is useful for applying different selection styles in different sections of a page or in different components.
-
-
-// Mixin for custom selection
-// ----------------------------------------------------------------------------
-@mixin custom-selection($bg-color, $text-color) {
-    &::selection {
-        background-color: $bg-color;
-        color: $text-color;
-    }
-    &::-moz-selection {
-        background-color: $bg-color;
-        color: $text-color;
-    }
-}
-
-// Applying conditional selection styles
-.dark-mode {
-    .text {
-        @include custom-selection(#666, #eee); // Dark mode selection
-
-        &:hover {
-            @include custom-selection(#555, #fff); // Darker selection on hover
-        }
-    }
-}
-
-.light-mode {
-    .text {
-            @include custom-selection(#ddd, #333); // Light mode selection
-
-        &:hover {
-            @include custom-selection(#ccc, #222); // Lighter selection on hover
-        }
-    }
-}
-
-
-// Theming Support with SCSS Maps
-// ----------------------------------------------------------------------------
-// Leverage SCSS maps and loops to apply selection styles based on a theme
-// system. This allows for easy theming and customization across your
-// application.
-
-$themes: (
-    "light": (
-        "selection-bg": #e0f7fa,
-        "selection-text": #00796b
-    ),
-    "dark": (
-        "selection-bg": #004d40,
-        "selection-text": #b2dfdb
-    )
-);
-
-@each $theme-name, $theme-properties in $themes {
-    .#{$theme-name}-theme {
-        @include custom-selection(map-get($theme-properties, "selection-bg"), map-get($theme-properties, "selection-text"));
-    }
-}
-
-
-// Dynamic Color Adjustments
-// ----------------------------------------------------------------------------
-// Utilize SCSS color functions to dynamically adjust selection colors based
-// on a base color. This can be useful for creating selection styles that
-// are always readable and maintain good contrast with the text.
-
-@mixin dynamic-selection($base-color) {
-    $adjusted-bg-color: lighten($base-color, 20%);
-    $adjusted-text-color: darken($base-color, 50%);
-
-    &::selection {
-        background-color: $adjusted-bg-color;
-        color: $adjusted-text-color;
-    }
-    &::-moz-selection {
-        background-color: $adjusted-bg-color;
-        color: $adjusted-text-color;
-    }
-}
-
-.element {
-    @include dynamic-selection(#007bff); // Adjusts selection colors based on the provided base color
-}
-
-
-// Applying to Specific Elements with a Mixin
-// ----------------------------------------------------------------------------
-// Create a mixin that accepts both colors and a list of elements to apply
-// the selection styles to. This approach reduces repetition and increases
-// maintainability.
-
-@mixin apply-selection-to-elements($elements, $bg-color, $text-color) {
-    @each $element in $elements {
-        #{$element}::selection {
-            background-color: $bg-color;
-            color: $text-color;
-        }
-        #{$element}::-moz-selection {
-            background-color: $bg-color;
-            color: $text-color;
-        }
-    }
-}
-
-@include apply-selection-to-elements(('p', 'h1', '.custom-class'), #ffcc80, #f44336);
-
-
-
-// Animated Text Selection Background
-// ----------------------------------------------------------------------------
-// You can create a subtle animation effect for the text selection background using keyframes. This can add a dynamic visual cue when text is selected.
-
-@mixin animated-selection($start-color, $end-color) {
-    @keyframes selectionBackground {
-        0% { background-color: $start-color; }
-        100% { background-color: $end-color; }
-    }
-
-    &::selection {
-        animation: selectionBackground 1s infinite alternate;
-        color: contrast($end-color);
-    }
-    &::-moz-selection {
-        animation: selectionBackground 1s infinite alternate;
-        color: contrast($end-color);
-    }
-}
-
-body {
-    @include animated-selection(lighten($primary-color, 40%), lighten($primary-color, 20%));
-}
-
-
-// Gradient Text Selection
-// ----------------------------------------------------------------------------
-// Applying a gradient to the text selection background can align with modern
-// design trends. Note that this effect might not be consistent across all
-// browsers due to rendering limitations.
-
-@mixin gradient-selection($color1, $color2) {
-    &::selection {
-        background: linear-gradient(45deg, $color1, $color2);
-        color: mix($color1, $color2, 50%);
-    }
-    &::-moz-selection {
-        background: linear-gradient(45deg, $color1, $color2);
-        color: mix($color1, $color2, 50%);
-    }
-}
-
-.element {
-  @include gradient-selection(#FFD54F, #D500F9);
-}
-
-
-// Using Global Variables for Theme Consistency
-// Defining global variables for your theme colors allows for consistent and maintainable style application across your project, including text selection.
-
-
-// Define global theme colors
-$theme-colors: (
-  primary: #6200ea,
-  secondary: #03dac6,
-  selection-bg: #B388FF,
-  selection-text: #6200ea,
-);
-
-@mixin theme-selection {
-    &::selection {
-        background-color: map-get($theme-colors, selection-bg);
-        color: map-get($theme-colors, selection-text);
-    }
-    &::-moz-selection {
-        background-color: map-get($theme-colors, selection-bg);
-        color: map-get($theme-colors, selection-text);
-    }
-}
-
-// Apply globally or to specific elements
-body, .custom-text {
-    @include theme-selection;
-}
-
-
-// Pseudo-Element Selection Styles
-// While the ::selection pseudo-element is primarily used for text, you
-// can get creative by applying similar styles to other pseudo-elements
-// for a cohesive look.
-.element {
-    position: relative;
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 2px;
-        background: $primary-color;
-        bottom: -5px;
-        left: 0;
-    }
-
-    &:hover::after {
-        @include gradient-selection(#FFD54F, #D500F9); // Apply gradient to the pseudo-element on hover
-    }
-}
-
-// Scoped Selection Styles with Mixins
-// Creating a mixin to apply scoped selection styles can help manage different
-// selection themes within various parts of your application.
-
-
-@mixin scoped-selection($scope, $bg-color, $text-color) {
-    #{$scope}::selection {
-        background-color: $bg-color;
-        color: $text-color;
-    }
-    #{$scope}::-moz-selection {
-        background-color: $bg-color;
-        color: $text-color;
-    }
-}
-
-@include scoped-selection('.light-theme-text', #e0e0e0, #000);
-@include scoped-selection('.dark-theme-text', #333, #fff);

package/scss/mixins/_shape.scss

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

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