move.gl 0.0.1 → 0.0.2

package/src/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/src/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/src/scss/dev/_banner.scss

@@ -0,0 +1,36 @@
+// ============================================================================
+// StyleScape | Development | Banner
+// ============================================================================
+
+@mixin banner(
+    $file,
+    $version: '1.0.0',
+    $author: 'Scape Agency',
+    $website: 'https://www.style.scape/',
+    $license: 'Apache 2.0 License',
+    $licenseUrl: 'https://github.com/scape-agency/stylescape/blob/main/LICENSE',
+    $description: 'Layout Engine',
+    $repository: 'https://github.com/scape-agency/stylescape/',
+) {
+    @at-root {
+    /*!
+     * ============================================================================
+     *
+     * Stylescape #{$file} v#{$version} (#{$website})
+     * Copyright (c) 2020-2024 #{$author} (https://www.scape.agency)
+     * All rights reserved under #{$license} terms.
+     *
+     * ============================================================================
+     *
+     * @description     #{$description}
+     * @author          #{$author} (https://www.scape.agency)
+     * @version         v#{$version}
+     * @copyright       2020-2024 #{$author} (https://www.scape.agency)
+     * @website         #{$website}
+     * @repository      #{$repository}
+     * @license         #{$license} (#{$licenseUrl})
+     *
+     * ============================================================================
+     */
+    }
+}

package/src/scss/dev/_debug.scss

@@ -0,0 +1,18 @@
+// ============================================================================
+// StyleScape | Development | Debug
+// ============================================================================
+
+// Debug Mixin
+// A debug mixin to output property values directly into the DOM for quick
+// debugging purposes, particularly useful during development.
+@mixin debug($property, $value) {
+    &:after {
+        content: '#{$property}: #{$value}';
+        display: block;
+        background-color: yellow;
+        color: black;
+        font-size: 12px;
+        padding: 2px;
+    }
+}
+  

package/src/scss/dev/_deprecation.scss

@@ -0,0 +1,13 @@
+// ============================================================================
+// StyleScape | Development | Deprecation
+// ============================================================================
+
+// 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) {
+    @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/src/scss/dev/_index.scss

@@ -0,0 +1,8 @@
+// ============================================================================
+// StyleScape | Management
+// ============================================================================
+
+@forward "banner";
+@forward "modules";
+@forward "debug";
+@forward "deprecation";

package/src/scss/dev/_modules.scss

@@ -0,0 +1,23 @@
+// ============================================================================
+// StyleScape | Development | Modules
+// ============================================================================
+
+@use "pkg:unit.gl" as *;
+@use "pkg:hue.gl" as *;
+
+
+@forward "pkg:unit.gl";
+@forward "pkg:hue.gl";
+
+
+// @include icon_face(
+//     "../../../node_modules/icon.gl/font/icongl",
+//     "icongl",
+//     "",
+//     //   600,
+//     //   "normal",
+//     //   "#{$icon_name} SemiBold",
+//     //   "#{$icon_name}-SemiBold",
+//     "ttf",
+//     //   "otf"
+// );