move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/controls/_selection.scss

@@ -0,0 +1,208 @@
+////
+///
+/// Selection Controls Mixin Module
+/// =========================================================================
+///
+/// Provides mixins for customizing text selection styles including
+/// background colors, text colors, and themed selections. Supports
+/// cross-browser compatibility with vendor prefixes.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "sass:color";
+@use "sass:map";
+@use "../../variables" as *;
+@use "../../maps" as *;
+
+
+// ============================================================================
+// Mixins
+// ============================================================================
+
+
+/// selection
+/// ---------------------------------------------------------------------------
+/// Base mixin for applying styles to text selection across browsers.
+/// Uses @content to allow custom styles to be passed in.
+///
+/// @name selection
+/// @group Controls
+/// @access public
+///
+/// @content Styles to apply to selected text.
+///
+/// @example scss
+///   @include selection {
+///       background-color: #007bff;
+///       color: #fff;
+///   }
+///
+@mixin selection {
+    ::selection { @content; }
+    ::-moz-selection { @content; }
+    ::-webkit-selection { @content; }
+    ::-ms-selection { @content; }
+}
+
+
+/// custom-selection
+/// ---------------------------------------------------------------------------
+/// Mixin for defining custom text selection colors.
+/// Applies background and text color to selected text.
+///
+/// @name custom-selection
+/// @group Controls
+/// @access public
+///
+/// @param {Color} $bg-color [#b3d4fc] - Selection background color.
+/// @param {Color} $text-color [#fff] - Selection text color.
+///
+/// @example scss
+///   .element {
+///       @include custom-selection(#009688, #ffffff);
+///   }
+///
+@mixin custom-selection($bg-color: #b3d4fc, $text-color: #fff) {
+    &::selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+    &::-moz-selection {
+        background-color: $bg-color;
+        color: $text-color;
+    }
+}
+
+
+/// dynamic-selection
+/// ---------------------------------------------------------------------------
+/// Creates selection styles with dynamically adjusted colors based on a
+/// base color. Lightens background and darkens text for good contrast.
+///
+/// @name dynamic-selection
+/// @group Controls
+/// @access public
+///
+/// @param {Color} $base-color - Base color for dynamic adjustment.
+///
+/// @example scss
+///   .element {
+///       @include dynamic-selection(#007bff);
+///   }
+///
+@mixin dynamic-selection($base-color) {
+    $adjusted-bg-color: color.adjust($base-color, $lightness: 20%);
+    $adjusted-text-color: color.adjust($base-color, $lightness: -50%);
+
+    &::selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+    &::-moz-selection {
+        background-color: $adjusted-bg-color;
+        color: $adjusted-text-color;
+    }
+}
+
+
+/// apply-selection-to-elements
+/// ---------------------------------------------------------------------------
+/// Applies selection styles to a list of elements. Useful for batch
+/// application of consistent selection styles.
+///
+/// @name apply-selection-to-elements
+/// @group Controls
+/// @access public
+///
+/// @param {List} $elements - List of selectors to apply styles to.
+/// @param {Color} $bg-color - Selection background color.
+/// @param {Color} $text-color - Selection text color.
+///
+/// @example scss
+///   @include apply-selection-to-elements(
+///       ('p', 'h1', '.custom'),
+///       #ffcc80,
+///       #333
+///   );
+///
+@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;
+        }
+    }
+}
+
+
+/// gradient-selection
+/// ---------------------------------------------------------------------------
+/// Applies a gradient background to text selection. Note that gradient
+/// support may vary across browsers.
+///
+/// @name gradient-selection
+/// @group Controls
+/// @access public
+///
+/// @param {Color} $color1 - First gradient color.
+/// @param {Color} $color2 - Second gradient color.
+///
+/// @example scss
+///   .element {
+///       @include gradient-selection(#FFD54F, #D500F9);
+///   }
+///
+@mixin gradient-selection($color1, $color2) {
+    &::selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: color.mix($color1, $color2, 50%);
+    }
+    &::-moz-selection {
+        background: linear-gradient(45deg, $color1, $color2);
+        color: color.mix($color1, $color2, 50%);
+    }
+}
+
+
+/// scoped-selection
+/// ---------------------------------------------------------------------------
+/// Applies selection styles to a specific scope/selector. Useful for
+/// theming different sections of a page.
+///
+/// @name scoped-selection
+/// @group Controls
+/// @access public
+///
+/// @param {String} $scope - CSS selector for the scope.
+/// @param {Color} $bg-color - Selection background color.
+/// @param {Color} $text-color - Selection text color.
+///
+/// @example scss
+///   @include scoped-selection('.dark-theme', #333, #fff);
+///   @include scoped-selection('.light-theme', #e0e0e0, #000);
+///
+@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;
+    }
+}

package/dist/scss/mixins/controls/_touch.scss

@@ -0,0 +1,401 @@
+////
+///
+/// Touch Controls Mixin Module
+/// =========================================================================
+///
+/// Provides comprehensive mixins for touch interactions including touch
+/// targets, touch feedback, touch scrolling, gesture handling, and
+/// responsive touch styles for mobile and tablet devices.
+///
+/// @group Controls
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+///
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../../variables" as *;
+
+
+// ============================================================================
+// Touch Target Mixins
+// ============================================================================
+
+///
+/// Ensure minimum touch target size for accessibility.
+///
+/// @param {Length} $min-size [44px] - Minimum touch target size.
+///
+@mixin touch_target($min-size: $touch-target-min) {
+    min-width: $min-size;
+    min-height: $min-size;
+
+    // Ensure touch area even for inline elements
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+///
+/// Increase touch area with invisible padding.
+///
+/// @param {Length} $padding [10px] - Extra padding for touch area.
+///
+@mixin touch_area_expand($padding: 10px) {
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -$padding;
+        right: -$padding;
+        bottom: -$padding;
+        left: -$padding;
+    }
+}
+
+///
+/// Touch-friendly button styles.
+///
+/// @param {Length} $min-size [44px] - Minimum size.
+/// @param {Length} $padding [12px 24px] - Button padding.
+///
+@mixin touch_button($min-size: $touch-target-min, $padding: 12px 24px) {
+    min-height: $min-size;
+    padding: $padding;
+    touch-action: manipulation;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+
+
+// ============================================================================
+// Touch Feedback Mixins
+// ============================================================================
+
+///
+/// Visual feedback for touch interactions.
+///
+/// @param {Number} $scale [0.95] - Scale on press.
+/// @param {Color} $highlight [rgba(0,0,0,0.1)] - Highlight color.
+///
+@mixin touch_feedback($scale: 0.95, $highlight: rgba(0, 0, 0, 0.1)) {
+    transition: transform $touch-feedback-duration ease,
+                background-color $touch-feedback-duration ease;
+
+    &:active {
+        transform: scale($scale);
+        background-color: $highlight;
+    }
+}
+
+///
+/// Ripple effect on touch (requires JS for position).
+///
+/// @param {Color} $color [rgba(255,255,255,0.3)] - Ripple color.
+///
+@mixin touch_ripple($color: rgba(255, 255, 255, 0.3)) {
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        background: $color;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
+    }
+
+    &:active::after {
+        width: 200%;
+        height: 200%;
+        opacity: 1;
+    }
+}
+
+///
+/// Highlight effect for tapped items.
+///
+/// @param {Color} $color [rgba(0,0,0,0.05)] - Highlight color.
+///
+@mixin touch_highlight($color: rgba(0, 0, 0, 0.05)) {
+    -webkit-tap-highlight-color: $color;
+
+    &:active {
+        background-color: $color;
+    }
+}
+
+///
+/// Disable default touch highlight.
+///
+@mixin touch_highlight_none {
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+}
+
+
+// ============================================================================
+// Touch Scroll Mixins
+// ============================================================================
+
+///
+/// Enable smooth momentum scrolling on touch devices.
+///
+@mixin touch_scroll {
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+///
+/// Horizontal touch scrolling.
+///
+@mixin touch_scroll_x {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scroll-snap-type: x mandatory;
+}
+
+///
+/// Touch-friendly scrollable container.
+///
+/// @param {Length} $max-height [none] - Maximum height.
+///
+@mixin touch_scrollable($max-height: none) {
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
+
+    @if $max-height != none {
+        max-height: $max-height;
+    }
+}
+
+
+// ============================================================================
+// Touch Action Mixins
+// ============================================================================
+
+///
+/// Control touch action behavior.
+///
+/// @param {String} $action [manipulation] - Touch action value.
+///
+@mixin touch_action($action: manipulation) {
+    touch-action: $action;
+}
+
+///
+/// Disable all touch actions (for custom handling).
+///
+@mixin touch_action_none {
+    touch-action: none;
+}
+
+///
+/// Allow only pan gestures.
+///
+/// @param {String} $direction [both] - pan-x, pan-y, or both.
+///
+@mixin touch_pan($direction: both) {
+    @if $direction == x {
+        touch-action: pan-x;
+    } @else if $direction == y {
+        touch-action: pan-y;
+    } @else {
+        touch-action: pan-x pan-y;
+    }
+}
+
+///
+/// Allow pinch zoom.
+///
+@mixin touch_pinch_zoom {
+    touch-action: pinch-zoom;
+}
+
+///
+/// Standard touch manipulation (disables double-tap zoom).
+///
+@mixin touch_manipulation {
+    touch-action: manipulation;
+}
+
+
+// ============================================================================
+// User Selection Mixins
+// ============================================================================
+
+///
+/// Prevent text selection on touch.
+///
+@mixin touch_no_select {
+    user-select: none;
+    -webkit-user-select: none;
+    -webkit-touch-callout: none;
+}
+
+///
+/// Allow text selection.
+///
+@mixin touch_select {
+    user-select: text;
+    -webkit-user-select: text;
+}
+
+///
+/// Prevent all callouts on long press.
+///
+@mixin touch_no_callout {
+    -webkit-touch-callout: none;
+}
+
+
+// ============================================================================
+// Input Zoom Prevention Mixins
+// ============================================================================
+
+///
+/// Prevent zoom on input focus (iOS).
+///
+@mixin touch_no_zoom_input {
+    font-size: 16px; // Prevents auto-zoom on iOS
+
+    &:focus {
+        font-size: 16px;
+    }
+}
+
+///
+/// Touch-friendly form inputs.
+///
+/// @param {Length} $min-height [44px] - Minimum height.
+///
+@mixin touch_input($min-height: $touch-target-min) {
+    min-height: $min-height;
+    font-size: 16px; // Prevent zoom
+    padding: 12px 16px;
+    touch-action: manipulation;
+}
+
+
+// ============================================================================
+// Gesture Mixins
+// ============================================================================
+
+///
+/// Styles for swipeable elements.
+///
+/// @param {String} $direction [horizontal] - Swipe direction.
+///
+@mixin touch_swipeable($direction: horizontal) {
+    @include touch_highlight_none;
+    @include touch_no_select;
+
+    @if $direction == horizontal {
+        touch-action: pan-x;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+    } @else {
+        touch-action: pan-y;
+        overflow-y: auto;
+        scroll-snap-type: y mandatory;
+    }
+
+    -webkit-overflow-scrolling: touch;
+}
+
+///
+/// Draggable element styles.
+///
+@mixin touch_draggable {
+    touch-action: none;
+    user-select: none;
+    -webkit-user-drag: none;
+    cursor: grab;
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+///
+/// Pinch-zoomable element.
+///
+@mixin touch_zoomable {
+    touch-action: pinch-zoom pan-x pan-y;
+}
+
+
+// ============================================================================
+// Responsive Touch Mixins
+// ============================================================================
+
+///
+/// Apply styles only on touch devices.
+///
+@mixin touch_only {
+    @media (hover: none) and (pointer: coarse) {
+        @content;
+    }
+}
+
+///
+/// Apply styles only on non-touch devices.
+///
+@mixin no_touch {
+    @media (hover: hover) and (pointer: fine) {
+        @content;
+    }
+}
+
+///
+/// Hover styles that work on both touch and non-touch.
+///
+@mixin touch_hover {
+    &:hover,
+    &:focus,
+    &:active {
+        @content;
+    }
+}
+
+
+// ============================================================================
+// Utility Classes
+// ============================================================================
+
+///
+/// Generate touch utility classes.
+///
+@mixin generate_touch_utilities {
+    .touch-target { @include touch_target; }
+    .touch-target-lg { @include touch_target($touch-target-large); }
+
+    .touch-scroll { @include touch_scroll; }
+    .touch-scroll-x { @include touch_scroll_x; }
+
+    .touch-none { @include touch_action_none; }
+    .touch-manipulation { @include touch_manipulation; }
+    .touch-pan-x { @include touch_pan(x); }
+    .touch-pan-y { @include touch_pan(y); }
+
+    .touch-no-select { @include touch_no_select; }
+    .touch-no-highlight { @include touch_highlight_none; }
+
+    .touch-feedback { @include touch_feedback; }
+    .touch-draggable { @include touch_draggable; }
+}