move.gl 0.0.1 → 0.0.2

package/dist/scss/classes/_transforms.scss

@@ -0,0 +1,138 @@
+// ============================================================================
+// move.gl | Transform Classes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Transform Classes
+/// ===========================================================================
+///
+/// This module provides ready-to-use CSS classes for transforms.
+/// All classes use corresponding mixins from the mixins/transforms module.
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+// ============================================================================
+// Flip Transform Classes
+// ============================================================================
+
+///
+/// Predefined class for horizontal flip.
+///
+.transform_flip_horizontal {
+    @include transform_flip_horizontal;
+}
+
+///
+/// Predefined class for vertical flip.
+///
+.transform_flip_vertical {
+    @include transform_flip_vertical;
+}
+
+///
+/// Predefined class for both horizontal and vertical flips.
+///
+.transform_flip_both {
+    @include transform_flip_both();
+}
+
+///
+/// Alternate combination class for both horizontal and vertical flips.
+///
+.transform_flip_horizontal.transform_flip_vertical {
+    @include transform_flip_both();
+}
+
+
+// ============================================================================
+// Rotate Transform Classes
+// ============================================================================
+
+///
+/// Predefined class for rotating elements by 90 degrees.
+///
+.transform_rotate_90 {
+    @include transform_rotate(90deg);
+}
+
+///
+/// Predefined class for rotating elements by 180 degrees.
+///
+.transform_rotate_180 {
+    @include transform_rotate(180deg);
+}
+
+///
+/// Predefined class for rotating elements by 270 degrees.
+///
+.transform_rotate_270 {
+    @include transform_rotate(270deg);
+}
+
+///
+/// Predefined class for dynamic rotation using a CSS variable.
+///
+.transform_rotate_dynamic {
+    @include transform_rotate_dynamic();
+}
+
+
+// ============================================================================
+// Scale Transform Classes
+// ============================================================================
+
+///
+/// Predefined class for scaling elements up.
+///
+.scale_up {
+    @include scale(1.2);
+}
+
+///
+/// Predefined class for scaling elements down.
+///
+.scale_down {
+    @include scale(0.8);
+}
+
+
+// ============================================================================
+// Translate Transform Classes
+// ============================================================================
+
+///
+/// Predefined class for translating elements by predefined X and Y values.
+///
+.translate_xy {
+    @include translate(10px, 10px);
+}
+
+
+// ============================================================================
+// Skew Transform Classes
+// ============================================================================
+
+///
+/// Predefined class for skewing elements by predefined X and Y angles.
+///
+.skew_xy {
+    @include skew(10deg, 10deg);
+}
+

package/dist/scss/classes/_transitions.scss

@@ -0,0 +1,264 @@
+// ============================================================================
+// move.gl | Transition & Hover Effect Classes
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Transition & Hover Classes
+/// ===========================================================================
+///
+/// This module provides ready-to-use CSS classes for transitions and
+/// hover effects. Each class uses the corresponding mixin from the
+/// mixins/transitions and mixins/effects modules.
+///
+/// @group Classes
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0 initial release
+/// @access public
+////
+
+
+// ============================================================================
+// Use
+// ============================================================================
+
+@use "../mixins/transitions" as *;
+@use "../mixins/effects" as *;
+@use "../mixins/controls" as *;
+
+
+// ============================================================================
+// Basic Transition Classes
+// ============================================================================
+
+/// Transition opacity
+.transition-opacity {
+    @include hover_transition(opacity);
+    @include opacity_hover(1, 0.5);
+}
+
+/// Transition transform (scale)
+.transition-scale {
+    @include hover_scale(1.2);
+}
+
+/// Transition transform (translate)
+.transition-translate {
+    @include hover_translate(0, -10px);
+}
+
+/// Transition transform (rotate)
+.transition-rotate {
+    @include hover_rotate(15deg);
+}
+
+/// Transition background color
+.transition-color {
+    @include hover_transition(background-color);
+    &:hover { background-color: #ef4444; }
+}
+
+/// Transition box-shadow
+.transition-shadow {
+    @include hover_shadow();
+}
+
+
+// ============================================================================
+// Timing Function Classes
+// ============================================================================
+
+/// Linear timing
+.timing-linear {
+    @include transition(transform, 0.6s, linear);
+    &.active { transform: translateX(100px); }
+}
+
+/// Ease timing
+.timing-ease {
+    @include transition(transform, 0.6s, ease);
+    &.active { transform: translateX(100px); }
+}
+
+/// Ease-in timing
+.timing-ease-in {
+    @include transition(transform, 0.6s, ease-in);
+    &.active { transform: translateX(100px); }
+}
+
+/// Ease-out timing
+.timing-ease-out {
+    @include transition(transform, 0.6s, ease-out);
+    &.active { transform: translateX(100px); }
+}
+
+/// Ease-in-out timing
+.timing-ease-in-out {
+    @include transition(transform, 0.6s, ease-in-out);
+    &.active { transform: translateX(100px); }
+}
+
+/// Bounce timing (custom cubic-bezier)
+.timing-bounce {
+    @include transition(transform, 0.6s, cubic-bezier(0.68, -0.55, 0.265, 1.55));
+    &.active { transform: translateX(100px); }
+}
+
+
+// ============================================================================
+// Transform Hover Classes
+// ============================================================================
+
+/// Translate X on hover
+.transform-translate-x {
+    @include hover_transition(transform);
+    &:hover { transform: translateX(20px); }
+}
+
+/// Translate Y on hover
+.transform-translate-y {
+    @include hover_translate(0, -20px);
+}
+
+/// Scale on hover
+.transform-scale {
+    @include hover_scale(1.3);
+}
+
+/// Rotate on hover
+.transform-rotate {
+    @include hover_rotate(45deg);
+}
+
+/// Skew X on hover
+.transform-skew-x {
+    @include hover_skew(15deg, 0);
+}
+
+/// Skew Y on hover
+.transform-skew-y {
+    @include hover_skew(0, 15deg);
+}
+
+/// Rotate X (3D) on hover
+.transform-rotate-x {
+    @include hover_transition(transform);
+    &:hover { transform: rotateX(45deg); }
+}
+
+/// Rotate Y (3D) on hover
+.transform-rotate-y {
+    @include hover_transition(transform);
+    &:hover { transform: rotateY(45deg); }
+}
+
+/// Rotate Z on hover
+.transform-rotate-z {
+    @include hover_transition(transform);
+    &:hover { transform: rotateZ(45deg); }
+}
+
+/// Combined: scale + rotate
+.transform-combined-1 {
+    @include hover_scale_rotate(1.2, 10deg);
+}
+
+/// Combined: translate + scale
+.transform-combined-2 {
+    @include hover_lift_scale(-10px, 1.1);
+}
+
+/// Combined: 3D rotate + scale
+.transform-combined-3 {
+    @include hover_3d_rotate(30deg, 15deg, 1.1);
+}
+
+
+// ============================================================================
+// Hover Effect Classes
+// ============================================================================
+
+/// Scale hover effect
+.hover--scale {
+    @include hover_scale();
+}
+
+/// Lift hover effect
+.hover--lift {
+    @include hover_lift();
+}
+
+/// Glow hover effect
+.hover--glow {
+    @include hover_glow();
+}
+
+/// Shadow hover effect
+.hover--shadow {
+    @include hover_shadow();
+}
+
+/// Brighten hover effect
+.hover--brighten {
+    @include hover_brighten();
+}
+
+/// Darken hover effect
+.hover--darken {
+    @include hover_darken();
+}
+
+/// Rotate hover effect
+.hover--rotate {
+    @include hover_rotate();
+}
+
+/// Shake hover effect
+.hover--shake {
+    @include hover_shake();
+}
+
+
+// ============================================================================
+// Cursor Classes
+// ============================================================================
+
+.cursor--default { @include cursor_default; }
+.cursor--pointer { @include cursor_pointer; }
+.cursor--text { @include cursor_text; }
+.cursor--move { @include cursor_move; }
+.cursor--grab { @include cursor_grab; }
+.cursor--grabbing { @include cursor_grabbing; }
+.cursor--not-allowed { @include cursor_not_allowed; }
+.cursor--wait { @include cursor_wait; }
+.cursor--help { @include cursor_help; }
+.cursor--crosshair { @include cursor_crosshair; }
+.cursor--zoom-in { @include cursor_zoom_in; }
+.cursor--zoom-out { @include cursor_zoom_out; }
+
+// Resize cursors
+.cursor--n-resize { @include cursor_n_resize; }
+.cursor--e-resize { @include cursor_e_resize; }
+.cursor--s-resize { @include cursor_s_resize; }
+.cursor--w-resize { @include cursor_w_resize; }
+.cursor--ne-resize { @include cursor_ne_resize; }
+.cursor--se-resize { @include cursor_se_resize; }
+.cursor--sw-resize { @include cursor_sw_resize; }
+.cursor--nw-resize { @include cursor_nw_resize; }
+.cursor--ew-resize { @include cursor_ew_resize; }
+.cursor--ns-resize { @include cursor_ns_resize; }
+.cursor--col-resize { @include cursor_col_resize; }
+.cursor--row-resize { @include cursor_row_resize; }
+
+
+// ============================================================================
+// Perspective Container
+// ============================================================================
+
+.perspective-container {
+    @include perspective_container;
+}
+

package/{scss → dist/scss}/dev/_deprecation.scss

@@ -5,6 +5,9 @@
 // Deprecation Warning Mixin
 // This mixin can be used to mark deprecated mixins or styles, displaying a warning in the console during compilation.
 @mixin deprecate($feature, $version, $alternative: null) {
-    @warn 'Deprecation Warning: #{$feature} will be removed in version #{$version}.' + if($alternative, ' Use #{$alternative} instead.', '');
-  }
-  
+    @if $alternative {
+        @warn 'Deprecation Warning: #{$feature} will be removed in version #{$version}. Use #{$alternative} instead.';
+    } @else {
+        @warn 'Deprecation Warning: #{$feature} will be removed in version #{$version}.';
+    }
+}

package/{scss → dist/scss}/dev/_modules.scss

@@ -2,13 +2,12 @@
 // StyleScape | Development | Modules
 // ============================================================================
 
-@use "../../../../unit.gl/scss/index.scss" as *;
-@use "../../../../hue.gl/scss/index.scss" as *;
-// @use "../../../../icon.gl/scss/index.scss" as *;
+@use "pkg:unit.gl" as *;
+@use "pkg:hue.gl" as *;
 
-@forward "../../../../unit.gl/scss/index.scss";
-@forward "../../../../hue.gl/scss/index.scss";
-// @forward "../../../../icon.gl/scss/index.scss";
+
+@forward "pkg:unit.gl";
+@forward "pkg:hue.gl";
 
 
 // @include icon_face(