move.gl 0.0.1

package/scss/classes/_transforms.scss

@@ -0,0 +1,124 @@
+
+
+
+
+
+
+
+///
+/// Predefined class for horizontal flip.
+/// Applies the horizontal flip mixin.
+/// 
+.transform_flip_horizontal {
+    @include transform_flip_horizontal;
+}
+
+///
+/// Predefined class for vertical flip.
+/// Applies the vertical flip mixin.
+/// 
+.transform_flip_vertical {
+    @include transform_flip_vertical;
+}
+
+///
+/// Predefined class for both horizontal and vertical flips.
+/// Applies the mixin that combines both transformations.
+/// 
+.transform_flip_both {
+    @include transform_flip_both();
+}
+
+///
+/// Alternate combination class for both horizontal and vertical flips.
+/// Combines the horizontal and vertical flip classes.
+/// 
+.transform_flip_horizontal.transform_flip_vertical {
+    @include transform_flip_both(); // Ensures both flips are applied
+}
+
+
+
+
+///
+/// Predefined class for rotating elements by 90 degrees.
+/// Applies the 90 degrees rotation mixin.
+/// 
+.transform_rotate_90  {
+    @include transform_rotate(90deg);
+}
+
+///
+/// Predefined class for rotating elements by 180 degrees.
+/// Applies the 180 degrees rotation mixin.
+/// 
+.transform_rotate_180 {
+    @include transform_rotate(180deg);
+}
+
+///
+/// Predefined class for rotating elements by 270 degrees.
+/// Applies the 270 degrees rotation mixin.
+/// 
+.transform_rotate_270 {
+    @include transform_rotate(270deg);
+}
+
+///
+/// Predefined class for dynamic rotation using a CSS variable.
+/// Allows rotation to be controlled via the CSS variable `--rotation-angle`.
+///
+.transform_rotate_dynamic {
+    @include transform_rotate_dynamic();
+}
+
+
+
+
+
+
+
+$default-rotation: 0deg !default;
+$rotation-90: 90deg !default;
+$rotation-180: 180deg !default;
+$rotation-270: 270deg !default;
+
+$default-scale: 1 !default;
+$scale-up: 1.2 !default;
+$scale-down: 0.8 !default;
+
+$default-translate: 0 !default;
+$translate-x: 10px !default;
+$translate-y: 10px !default;
+
+$default-skew: 0deg !default;
+$skew-x: 10deg !default;
+$skew-y: 10deg !default;
+
+///
+/// Predefined class for scaling elements up.
+///
+.scale_up {
+    @include scale($scale-up);
+}
+
+///
+/// Predefined class for scaling elements down.
+///
+.scale_down {
+    @include scale($scale-down);
+}
+
+///
+/// Predefined class for translating elements by predefined X and Y values.
+///
+.translate_xy {
+    @include translate($translate-x, $translate-y);
+}
+
+///
+/// Predefined class for skewing elements by predefined X and Y angles.
+///
+.skew_xy {
+    @include skew($skew-x, $skew-y);
+}

package/scss/classes/keyboard.scss

@@ -0,0 +1,18 @@
+#keyboard div {
+    display: inline-block;
+    margin: 5px;
+    width: 30px;
+    height: 30px;
+    background-color: #ddd;
+    text-align: center;
+    line-height: 30px;
+    user-select: none;
+    cursor: pointer;
+}
+
+input[type="text"] {
+    width: 300px;
+    margin: 10px;
+    padding: 5px;
+    font-size: 16px;
+}

package/scss/classes/screensaver.scss

@@ -0,0 +1,15 @@
+#screensaver {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: black;
+    z-index: 1000; /* Make sure it covers other content */
+}
+
+#screensaverVideo, #screensaverImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Ensure the content covers the full area */
+}

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

@@ -0,0 +1,10 @@
+// ============================================================================
+// 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) {
+    @warn 'Deprecation Warning: #{$feature} will be removed in version #{$version}.' + if($alternative, ' Use #{$alternative} instead.', '');
+  }
+  

package/scss/dev/_index.scss

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

package/scss/dev/_modules.scss

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

package/scss/effects/_filter.scss

@@ -0,0 +1,176 @@
+
+
+// ============================================================================
+// StyleScape | Effects | Filter
+// ============================================================================
+
+@use "../variables" as *;
+@use "../mixins" as *;
+
+
+$default-blur: 2px;
+$hover-blur: 4px;
+
+
+@mixin filter_blur {
+    backdrop-filter:            blur(calc(#{$q} * 4));
+    -webkit-backdrop-filter:    blur(calc(#{$q} * 4));
+}
+
+
+
+// Applying Filter Mixins
+// You can apply these mixins to your elements to achieve the desired effects:
+
+
+.image-blur {
+    @include filter_blur(4px);
+}
+
+.image-grayscale {
+    @include filter_grayscale(50%);
+}
+
+.image-brightness {
+    @include filter_brightness(150%);
+}
+
+.image-contrast {
+    @include filter_contrast(200%);
+}
+
+.image-sepia {
+    @include filter_sepia(60%);
+}
+
+// Combining multiple filter effects
+.filter_combine {
+    @include combine-filters(brightness(130%), contrast(120%), sepia(30%));
+}
+// Advanced Usage with Dynamic Values
+// SCSS variables and functions can be used to dynamically adjust filter values, which is particularly useful for themes or interactive elements:
+
+
+
+.image-interactive {
+    @include blur($default-blur);
+
+    &:hover {
+        @include blur($hover-blur);
+    }
+}
+
+// Function to calculate contrast based on a light or dark theme
+@function theme-contrast($theme) {
+    @if $theme == 'dark' {
+        @return 150%;
+    } @else {
+        @return 100%;
+    }
+}
+
+.image-theme {
+    $current-theme: 'dark'; // Example variable that might be dynamically set
+    @include contrast(theme-contrast($current-theme));
+}
+// Responsive Filters
+// You can also use media queries within SCSS to apply different filters based on viewport sizes, enhancing responsive design:
+
+
+.image-responsive {
+    @include grayscale(100%);
+
+    @media (min-width: 768px) {
+        @include grayscale(0%);
+    }
+}
+
+
+
+// Theming with Filter Effects
+// You can define a set of filter effects for different themes (e.g., dark mode, light mode) using SCSS maps and loops. This approach allows you to switch filter effects based on the active theme dynamically.
+
+
+// Define themes with specific filter values
+$themes: (
+    light: (
+        brightness: 100%,
+        contrast: 90%
+    ),
+    dark: (
+        brightness: 80%,
+        contrast: 110%
+    )
+);
+
+// Apply theme-based filters using a mixin
+@mixin apply-theme($theme-name) {
+    $theme: map-get($themes, $theme-name);
+    filter: brightness(map-get($theme, brightness)) contrast(map-get($theme, contrast));
+}
+
+.element {
+// Example usage with a light theme
+@include apply-theme(light);
+
+&:hover {
+    // Darken on hover for the light theme
+    @include apply-theme(dark);
+}
+}
+// Animated Filter Transitions
+// SCSS can be used to create smooth transitions between filter states, adding a dynamic and interactive feel to your elements.
+
+
+@mixin filter-transition($duration: 0.3s, $easing: ease) {
+    transition: filter $duration $easing;
+}
+
+.element-with-transition {
+    @include grayscale(0%);
+    @include filter-transition(0.5s, ease-in-out);
+
+    &:hover {
+        @include grayscale(100%);
+    }
+}
+// Generating Multiple Filter Classes with Loops
+// SCSS loops can be incredibly powerful for generating a series of classes that apply varying levels of a specific filter effect, such as a range of blur or grayscale values.
+
+
+// @for $i from 1 through 10 {
+//   .blur-#{$i} {
+//     filter: blur(#{$i}px);
+//   }
+
+//   .grayscale-#{$i * 10} {
+//     filter: grayscale(#{$i * 10}%);
+//   }
+// }
+// Custom Mixins for Complex Filter Combinations
+// For more complex or commonly used combinations of filters, you can create custom mixins. This approach keeps your code DRY and makes complex filter applications more manageable.
+
+
+@mixin artistic-effect($blur-radius, $saturate-level, $sepia-level) {
+    filter: blur($blur-radius) saturate($saturate-level) sepia($sepia-level);
+}
+
+.element-artistic {
+    @include artistic-effect(2px, 200%, 50%);
+}
+// Utilizing Functions for Dynamic Filter Values
+// SCSS functions can calculate and return dynamic filter values based on certain conditions or inputs, offering a high degree of flexibility.
+
+
+@function calculate-brightness($light-mode) {
+    @if $light-mode {
+        @return 120%;
+    } @else {
+        @return 80%;
+    }
+}
+
+.element-dynamic-brightness {
+    $is-light-mode: true; // Example condition
+    filter: brightness(calculate-brightness($is-light-mode));
+}

package/scss/effects/_index.scss

@@ -0,0 +1,23 @@
+// Copyright 2024 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.
+
+
+// ============================================================================
+// StyleScape | Effects
+// ============================================================================
+
+
+@forward "opacity";
+@forward "filter";
+@forward "shadow";

package/scss/effects/_opacity.scss

@@ -0,0 +1,62 @@
+// Copyright 2024 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.
+
+
+// ============================================================================
+// StyleScape | Effects | Opacity
+// ============================================================================
+
+@use "../variables" as *;
+@use "../mixins" as *;
+// Base Opacity Mixin
+// ----------------------------------------------------------------------------
+
+@mixin set_opacity($opacity-level) {
+    opacity: $opacity-level !important;
+    visibility: if($opacity-level > 0, visible, hidden);
+}
+
+
+// Predefined Opacity Levels
+// ----------------------------------------------------------------------------
+
+.opacity_00 { @include set_opacity(0.0); }
+.opacity_01 { @include set_opacity(0.1); }
+.opacity_02 { @include set_opacity(0.2); }
+.opacity_03 { @include set_opacity(0.3); }
+.opacity_04 { @include set_opacity(0.4); }
+.opacity_05 { @include set_opacity(0.5); }
+.opacity_06 { @include set_opacity(0.6); }
+.opacity_07 { @include set_opacity(0.7); }
+.opacity_08 { @include set_opacity(0.8); }
+.opacity_09 { @include set_opacity(0.9); }
+.opacity_10 { @include set_opacity(1.0); }
+
+
+// ----------------------------------------------------------------------------
+
+$hover_opacity: 0.75;
+
+// Opacity Transition Mixin
+@mixin opacity_transition($duration: 0.3s, $hover_opacity: 0.75) {
+    transition: opacity $duration ease;
+    &:hover {
+        opacity: $hover_opacity;
+    }
+}
+
+// Example Usage of Opacity Transition
+.opacity_hover {
+    @include opacity_transition(0.3s, 0.75);
+}

package/scss/effects/_shadow.scss

@@ -0,0 +1,175 @@
+// Copyright 2024 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.
+
+
+// ============================================================================
+// StyleScape | Effects | Shadow
+// ============================================================================
+@use "../variables" as *;
+@use "../mixins" as *;
+
+// Base Shadow Mixin
+// ----------------------------------------------------------------------------
+
+@mixin box_shadow(
+    $offset_horizontal: 0,
+    $offset_vertical: 0,
+    $blur: 3px,
+    $spread: 0,
+    $color: rgba(0,0,0, .2)
+) {
+    box_shadow: $offset_horizontal $offset_vertical $blur $spread $color;
+}
+
+
+// Predefined Shadow Styles
+// ----------------------------------------------------------------------------
+
+.btn_shadow { @include box_shadow(0, 0, 6px, 0, rgba(0,0,0, .3)); }
+.box_shadow_light { @include box_shadow(0, 0, 3px, 0, rgba(0,0,0, .1)); }
+.box_shadow { @include box_shadow(0, 0, 3px, 0, rgba(0,0,0, .2)); }
+.box_shadow_dark { @include box_shadow(0, 0, 4px, 0, rgba(0,0,0, .4)); }
+.box_shadow_large { @include box_shadow(0, 0, 12px, 0, rgba(0,0,0, .1)); }
+
+
+// Extended Shadow Styles
+// ----------------------------------------------------------------------------
+
+.box_shadow_intense { @include box_shadow(0, 2px, 4px, 0, rgba(0,0,0, .5)); }
+.box_shadow_soft { @include box_shadow(0, 2px, 10px, 0, rgba(0,0,0, .05)); }
+.box_shadow_colored { @include box_shadow(0, 0, 5px, 0, rgba(255,0,0, .2)); } /* Example with color */
+.box_shadow_inset { @include box_shadow(inset 0 0 6px rgba(0,0,0, .3)); } /* Inset shadow */
+
+
+// Directional Box Shadows
+// ----------------------------------------------------------------------------
+
+.drop_shadow_top { @include box_shadow(0, -4px, 2px, -2px, rgba(0,0,0,0.4)); }
+.drop_shadow_right { @include box_shadow(4px, 0, 2px, -2px, rgba(0,0,0,0.4)); }
+.drop_shadow_bottom { @include box_shadow(0, 4px, 2px, -2px, rgba(0,0,0,0.4)); }
+.drop_shadow_left { @include box_shadow(-4px, 0, 2px, -2px, rgba(0,0,0,0.4)); }
+
+
+// Emphasized Box Shadows
+// ----------------------------------------------------------------------------
+
+.emphasize_dark { @include box_shadow(0, 0, 5px, 2px, rgba(0,0,0,.35)); }
+.emphasize_light { @include box_shadow(0, 0, 0, 10px, rgba(255,255,255,.25)); }
+.emphasize_inset { @include box_shadow(inset 0, 0, 7px, 4px, rgba(255,255,255,.5)); }
+.emphasize_border { @include box_shadow(inset 0, 0, 0, 7px, rgba(255,255,255,.5)); }
+
+
+// Embossed Box Shadows
+// ----------------------------------------------------------------------------
+
+.embossed_light {
+    border: 1px solid rgba(0,0,0,0.1);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
+}
+
+.embossed_heavy {
+    border: 1px solid rgba(0,0,0,0.1);
+    box-shadow: 
+        inset 0 2px 3px rgba(255,255,255,0.3),
+        inset 0 -2px 3px rgba(0,0,0,0.3),
+        0 1px 1px rgba(255,255,255,0.9);
+}
+
+
+// Shadow Border Mixin:
+// Add a shadow to mimic a border effect.
+@mixin shadow-border($shadow: 0 0 5px rgba(0,0,0,0.3)) {
+    box-shadow: $shadow;
+}
+
+.border-shadow-effect {
+    @include shadow-border();
+}
+
+
+
+// Hover Shadow Animation:
+// Adds a shadow effect on hover to make elements appear elevated.
+
+
+// @mixin hover-shadow-animation($hover-shadow: 0 4px 8px rgba(0,0,0,0.2)) {
+//     transition: box-shadow 0.3s ease;
+//     &:hover {
+//         box-shadow: $hover-shadow;
+//     }
+// }
+
+// .btn-hover-shadow {
+//     @include hover-shadow-animation();
+// }
+// Shadow Transition Mixin:
+// Smoothly transitions shadow effects on hover or focus.
+
+
+// @mixin shadow-transition($default-shadow, $hover-shadow) {
+//     box-shadow: $default-shadow;
+//     transition: box-shadow 0.3s ease;
+//     &:hover, &:focus {
+//         box-shadow: $hover-shadow;
+//     }
+// }
+
+// .card-transition {
+//     @include shadow-transition(0 2px 4px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.2));
+// }
+// Multi-layered Shadow:
+// Creates a more complex shadow by layering multiple shadows.
+
+
+// @mixin multi-layered-shadow($shadows...) {
+//     box-shadow: $shadows;
+// }
+
+// .multi-shadow {
+//     @include multi-layered-shadow(0 1px 2px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.2));
+// }
+// Inset Shadow:
+// Creates an inner shadow for a "cut-in" effect.
+
+
+// @mixin inset-shadow($horizontal: 0, $vertical: 0, $blur: 3px, $spread: 0, $color: rgba(0,0,0,0.5)) {
+//     box-shadow: inset $horizontal $vertical $blur $spread $color;
+// }
+
+// .inset-shadow-box {
+//     @include inset-shadow(0, 0, 5px, 0, rgba(0,0,0,0.25));
+// }
+// Soft Edge Shadow:
+// Generates a soft, diffuse shadow around an element.
+
+
+// @mixin soft-edge-shadow($blur: 10px, $color: rgba(0,0,0,0.2)) {
+//     box-shadow: 0 0 $blur $color;
+// }
+
+// .soft-edge {
+//     @include soft-edge-shadow();
+// }
+
+
+// Neomorphic Shadow:
+// Creates a shadow effect suitable for Neomorphism design.
+
+// @mixin neomorphic-shadow($light-color: rgba(255, 255, 255, 0.7), $dark-color: rgba(0, 0, 0, 0.3)) {
+//     box-shadow: 5px 5px 10px $dark-color, -5px -5px 10px $light-color;
+// }
+
+// .neo-box {
+//     @include neomorphic-shadow();
+// }