move.gl 0.0.1 → 0.0.2

package/src/scss/mixins/controls/_keyboard.scss

@@ -0,0 +1,300 @@
+////
+///
+/// Keyboard Component Mixins
+/// =========================================================================
+///
+/// Provides mixins for creating virtual keyboard UI components for
+/// kiosks, touch interfaces, and accessibility features.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+
+
+// ============================================================================
+// Keyboard Container Mixins
+// ============================================================================
+
+///
+/// Main keyboard container.
+///
+@mixin keyboard_container {
+    background: var(--keyboard-bg, $keyboard-bg);
+    border-radius: var(--keyboard-radius, $keyboard-radius);
+    padding: var(--keyboard-padding, $keyboard-padding);
+}
+
+///
+/// Keyboard row layout.
+///
+@mixin keyboard_row {
+    display: flex;
+    justify-content: center;
+    gap: var(--keyboard-gap, $keyboard-gap);
+    margin-bottom: var(--keyboard-gap, $keyboard-gap);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+// ============================================================================
+// Key Mixins
+// ============================================================================
+
+///
+/// Base key styling.
+///
+@mixin key_base {
+    min-width: var(--key-min-width, $key-min-width);
+    height: var(--key-height, $key-height);
+    border: none;
+    border-radius: var(--key-radius, $key-radius);
+    background: var(--key-bg, $key-bg);
+    color: var(--key-color, $key-color);
+    font-size: var(--key-font-size, $key-font-size);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+
+    &:hover {
+        background: var(--key-bg-hover, $key-bg-hover);
+        transform: translateY(-2px);
+    }
+
+    &:active {
+        background: var(--key-bg-active, $key-bg-active);
+        transform: translateY(0);
+    }
+}
+
+///
+/// Space key (wide).
+///
+@mixin key_space {
+    flex: 1;
+    max-width: var(--key-space-max-width, $key-space-max-width);
+}
+
+///
+/// Special keys (shift, backspace, enter).
+///
+@mixin key_special {
+    min-width: var(--key-special-width, $key-special-width);
+    background: var(--key-special-bg, $key-special-bg);
+}
+
+///
+/// Mode switch key.
+///
+@mixin key_mode {
+    min-width: var(--key-special-width, $key-special-width);
+    background: var(--key-special-bg, $key-special-bg);
+}
+
+///
+/// Active/pressed key state.
+///
+@mixin key_active {
+    background: var(--key-bg-active, $key-bg-active);
+    transform: translateY(0) scale(0.95);
+}
+
+///
+/// Highlighted key state.
+///
+@mixin key_highlight {
+    background: var(--key-bg-active, $key-bg-active);
+    animation: key-glow 1s ease-in-out infinite;
+}
+
+
+// ============================================================================
+// Key Animations
+// ============================================================================
+
+///
+/// Key press animation keyframes.
+///
+@mixin keyframes_key_press {
+    @keyframes key-press {
+        0% {
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(0.92);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+}
+
+///
+/// Key glow animation keyframes.
+///
+@mixin keyframes_key_glow {
+    @keyframes key-glow {
+        0%, 100% {
+            box-shadow: 0 0 0 rgba(102, 126, 234, 0);
+        }
+        50% {
+            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
+        }
+    }
+}
+
+
+// ============================================================================
+// Keyboard Layouts
+// ============================================================================
+
+///
+/// Compact keyboard layout.
+///
+@mixin keyboard_compact {
+    --keyboard-padding: 0.5rem;
+    --keyboard-gap: 4px;
+    --key-min-width: 32px;
+    --key-height: 40px;
+    --key-font-size: 14px;
+}
+
+///
+/// Large keyboard layout.
+///
+@mixin keyboard_large {
+    --keyboard-padding: 1.5rem;
+    --keyboard-gap: 8px;
+    --key-min-width: 48px;
+    --key-height: 56px;
+    --key-font-size: 18px;
+}
+
+///
+/// Floating keyboard styling.
+///
+@mixin keyboard_floating {
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+    transform: translateY(0);
+    transition: transform 0.3s ease;
+}
+
+///
+/// Dark theme keyboard.
+///
+@mixin keyboard_dark {
+    --keyboard-bg: #1a1a2e;
+    --key-bg: #2d2d44;
+    --key-bg-hover: #3d3d5c;
+}
+
+///
+/// Light theme keyboard.
+///
+@mixin keyboard_light {
+    --keyboard-bg: #e5e5e5;
+    --key-bg: #ffffff;
+    --key-bg-hover: #f0f0f0;
+    --key-color: #333333;
+}
+
+
+// ============================================================================
+// Keyboard Input Mixins
+// ============================================================================
+
+///
+/// Keyboard input field.
+///
+@mixin keyboard_input {
+    width: 100%;
+    padding: 1rem;
+    font-size: 18px;
+    border: 2px solid var(--keyboard-input-border, #444);
+    border-radius: 8px;
+    background: var(--keyboard-input-bg, #0d1117);
+    color: var(--keyboard-input-color, white);
+    margin-bottom: 1.5rem;
+
+    &:focus {
+        outline: none;
+        border-color: var(--keyboard-input-focus, #667eea);
+    }
+}
+
+
+// ============================================================================
+// Keyboard Mode Mixins
+// ============================================================================
+
+///
+/// Mode button container.
+///
+@mixin keyboard_modes {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1rem;
+    justify-content: center;
+}
+
+///
+/// Mode button styling.
+///
+@mixin keyboard_mode_btn {
+    padding: 0.5rem 1rem;
+    border: 2px solid var(--keyboard-mode-border, #667eea);
+    border-radius: 8px;
+    background: transparent;
+    color: var(--keyboard-mode-color, #667eea);
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+
+    &:hover,
+    &.active {
+        background: var(--keyboard-mode-active-bg, #667eea);
+        color: var(--keyboard-mode-active-color, white);
+    }
+}
+
+
+// ============================================================================
+// Keyboard Stats Mixins
+// ============================================================================
+
+///
+/// Stats display for keyboard metrics.
+///
+@mixin keyboard_stats {
+    display: flex;
+    justify-content: center;
+    gap: 2rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--keyboard-stats-border, #444);
+    color: var(--keyboard-stats-color, #aaa);
+    font-size: 14px;
+
+    span {
+        color: var(--keyboard-stats-value, #667eea);
+        font-weight: 600;
+    }
+}
+

package/src/scss/mixins/controls/_pointer.scss

@@ -0,0 +1,267 @@
+////
+///
+/// Pointer Controls Mixin Module
+/// =========================================================================
+///
+/// Provides mixins for managing pointer events in CSS. Allows easy
+/// application of the `pointer-events` property with support for both
+/// global and keyword values. Useful for managing user interactions
+/// on various elements, including SVGs and standard HTML elements.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+@use "../../maps" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+///
+/// Pointer Events Mixin
+/// ---------------------------------------------------------------------------
+///
+/// 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
+}
+