move.gl 0.0.1 → 0.0.2

package/dist/scss/mixins/loaders/_skeleton.scss

@@ -0,0 +1,461 @@
+// ============================================================================
+// move.gl | Skeleton Loader Mixins
+// ============================================================================
+// Copyright 2025 Scape Agency BV
+// Licensed under MIT License
+// ============================================================================
+
+////
+/// Skeleton Loader Mixins
+/// ===========================================================================
+///
+/// This module provides mixins for skeleton/placeholder loading animations.
+///
+/// @group Loaders
+/// @author Scape Agency
+/// @link https://move.gl
+/// @since 0.1.0
+/// @access public
+////
+
+@use "../../variables" as *;
+
+
+// ============================================================================
+// Keyframes
+// ============================================================================
+
+///
+/// Skeleton shimmer animation keyframes.
+///
+@mixin keyframes_skeleton_shimmer {
+    @keyframes skeleton-shimmer {
+        0% { background-position: -200% 0; }
+        100% { background-position: 200% 0; }
+    }
+}
+
+///
+/// Skeleton pulse animation keyframes.
+///
+@mixin keyframes_skeleton_pulse {
+    @keyframes skeleton-pulse {
+        0%, 100% { opacity: 0.5; }
+        50% { opacity: 1; }
+    }
+}
+
+///
+/// Skeleton wave animation keyframes.
+///
+@mixin keyframes_skeleton_wave {
+    @keyframes skeleton-wave {
+        0% { transform: translateX(-100%); }
+        100% { transform: translateX(100%); }
+    }
+}
+
+///
+/// Skeleton fade animation keyframes.
+///
+@mixin keyframes_skeleton_fade {
+    @keyframes skeleton-fade {
+        0% { opacity: 0.3; background-color: rgba(255, 255, 255, 0.1); }
+        50% { opacity: 0.6; background-color: rgba(255, 255, 255, 0.15); }
+        100% { opacity: 0.3; background-color: rgba(255, 255, 255, 0.1); }
+    }
+}
+
+
+// ============================================================================
+// Skeleton Base Mixin
+// ============================================================================
+
+///
+/// Base skeleton loader styles.
+///
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Number} $border-radius [4px] - Border radius.
+///
+@mixin skeleton_base(
+    $bg-color: $skeleton-bg,
+    $border-radius: 4px
+) {
+    background-color: var(--skeleton-bg, $bg-color);
+    border-radius: $border-radius;
+    position: relative;
+    overflow: hidden;
+}
+
+
+// ============================================================================
+// Skeleton Loader Mixins
+// ============================================================================
+
+///
+/// Shimmer skeleton loader (gradient sweep).
+///
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Color} $highlight [rgba(255,255,255,0.2)] - Shimmer highlight color.
+/// @param {Number} $border-radius [4px] - Border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_skeleton_shimmer(
+    $bg-color: $skeleton-bg,
+    $highlight: $skeleton-highlight,
+    $border-radius: 4px,
+    $duration: 1.5s
+) {
+    @include skeleton_base($bg-color, $border-radius);
+    background: linear-gradient(
+        90deg,
+        var(--skeleton-bg, $bg-color) 0%,
+        var(--skeleton-highlight, $highlight) 50%,
+        var(--skeleton-bg, $bg-color) 100%
+    );
+    background-size: 200% 100%;
+    animation: skeleton-shimmer $duration ease-in-out infinite;
+}
+
+///
+/// Pulse skeleton loader (opacity).
+///
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Number} $border-radius [4px] - Border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_skeleton_pulse(
+    $bg-color: $skeleton-bg,
+    $border-radius: 4px,
+    $duration: 1.5s
+) {
+    @include skeleton_base($bg-color, $border-radius);
+    animation: skeleton-pulse $duration ease-in-out infinite;
+}
+
+///
+/// Wave skeleton loader (sliding highlight).
+///
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Color} $highlight [rgba(255,255,255,0.3)] - Wave highlight color.
+/// @param {Number} $border-radius [4px] - Border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin loader_skeleton_wave(
+    $bg-color: $skeleton-bg,
+    $highlight: rgba(255, 255, 255, 0.3),
+    $border-radius: 4px,
+    $duration: 1.5s
+) {
+    @include skeleton_base($bg-color, $border-radius);
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(
+            90deg,
+            transparent 0%,
+            var(--skeleton-highlight, $highlight) 50%,
+            transparent 100%
+        );
+        animation: skeleton-wave $duration ease-in-out infinite;
+    }
+}
+
+///
+/// Fade skeleton loader.
+///
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Number} $border-radius [4px] - Border radius.
+/// @param {Time} $duration [2s] - Animation duration.
+///
+@mixin loader_skeleton_fade(
+    $bg-color: $skeleton-bg,
+    $border-radius: 4px,
+    $duration: 2s
+) {
+    @include skeleton_base($bg-color, $border-radius);
+    animation: skeleton-fade $duration ease-in-out infinite;
+}
+
+
+// ============================================================================
+// Skeleton Element Mixins
+// ============================================================================
+
+///
+/// Skeleton text line.
+///
+/// @param {Length} $width [100%] - Line width.
+/// @param {Length} $height [16px] - Line height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Number} $border-radius [4px] - Border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_text(
+    $width: 100%,
+    $height: 16px,
+    $bg-color: $skeleton-bg,
+    $border-radius: 4px,
+    $duration: 1.5s
+) {
+    width: $width;
+    height: $height;
+    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
+}
+
+///
+/// Skeleton paragraph (multiple text lines).
+///
+/// @param {Number} $lines [3] - Number of lines.
+/// @param {Length} $line-height [16px] - Line height.
+/// @param {Length} $gap [12px] - Gap between lines.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_paragraph(
+    $lines: 3,
+    $line-height: 16px,
+    $gap: 12px,
+    $bg-color: $skeleton-bg,
+    $duration: 1.5s
+) {
+    display: flex;
+    flex-direction: column;
+    gap: $gap;
+
+    span {
+        height: $line-height;
+        @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, 4px, $duration);
+
+        &:last-child {
+            width: 75%;
+        }
+
+        @for $i from 1 through $lines {
+            &:nth-child(#{$i}) {
+                animation-delay: calc(($i - 1) * 0.1s);
+            }
+        }
+    }
+}
+
+///
+/// Skeleton circle (avatar placeholder).
+///
+/// @param {Length} $size [48px] - Circle size.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_circle(
+    $size: 48px,
+    $bg-color: $skeleton-bg,
+    $duration: 1.5s
+) {
+    width: $size;
+    height: $size;
+    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, 50%, $duration);
+}
+
+///
+/// Skeleton rectangle (image placeholder).
+///
+/// @param {Length} $width [100%] - Rectangle width.
+/// @param {Length} $height [200px] - Rectangle height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Background color.
+/// @param {Number} $border-radius [8px] - Border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_rectangle(
+    $width: 100%,
+    $height: 200px,
+    $bg-color: $skeleton-bg,
+    $border-radius: 8px,
+    $duration: 1.5s
+) {
+    width: $width;
+    height: $height;
+    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
+}
+
+
+// ============================================================================
+// Skeleton Layout Mixins
+// ============================================================================
+
+///
+/// Skeleton card layout.
+///
+/// @param {Length} $width [300px] - Card width.
+/// @param {Length} $image-height [180px] - Image placeholder height.
+/// @param {Length} $padding [16px] - Card padding.
+/// @param {Color} $bg-color [rgba(255,255,255,0.05)] - Card background.
+/// @param {Number} $border-radius [12px] - Card border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_card(
+    $width: 300px,
+    $image-height: 180px,
+    $padding: 16px,
+    $bg-color: rgba(255, 255, 255, 0.05),
+    $border-radius: 12px,
+    $duration: 1.5s
+) {
+    width: $width;
+    background: var(--skeleton-card-bg, $bg-color);
+    border-radius: $border-radius;
+    overflow: hidden;
+
+    .skeleton-image {
+        width: 100%;
+        height: $image-height;
+        @include loader_skeleton_shimmer($skeleton-bg, $skeleton-highlight, 0, $duration);
+    }
+
+    .skeleton-content {
+        padding: $padding;
+
+        .skeleton-title {
+            @include skeleton_text(70%, 20px, $skeleton-bg, 4px, $duration);
+            margin-bottom: 12px;
+        }
+
+        .skeleton-text {
+            @include skeleton_text(100%, 14px, $skeleton-bg, 4px, $duration);
+            margin-bottom: 8px;
+
+            &:last-child {
+                width: 60%;
+            }
+        }
+    }
+}
+
+///
+/// Skeleton list item layout.
+///
+/// @param {Length} $avatar-size [40px] - Avatar size.
+/// @param {Length} $gap [12px] - Gap between avatar and content.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_list_item(
+    $avatar-size: 40px,
+    $gap: 12px,
+    $bg-color: $skeleton-bg,
+    $duration: 1.5s
+) {
+    display: flex;
+    align-items: center;
+    gap: $gap;
+    padding: 12px 0;
+
+    .skeleton-avatar {
+        @include skeleton_circle($avatar-size, $bg-color, $duration);
+        flex-shrink: 0;
+    }
+
+    .skeleton-content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .skeleton-title {
+            @include skeleton_text(60%, 14px, $bg-color, 4px, $duration);
+        }
+
+        .skeleton-subtitle {
+            @include skeleton_text(40%, 12px, $bg-color, 4px, $duration);
+        }
+    }
+}
+
+///
+/// Skeleton table row.
+///
+/// @param {Number} $columns [4] - Number of columns.
+/// @param {Length} $height [20px] - Cell height.
+/// @param {Length} $gap [16px] - Gap between cells.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_table_row(
+    $columns: 4,
+    $height: 20px,
+    $gap: 16px,
+    $bg-color: $skeleton-bg,
+    $duration: 1.5s
+) {
+    display: flex;
+    gap: $gap;
+    padding: 12px 0;
+
+    span {
+        flex: 1;
+        height: $height;
+        @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, 4px, $duration);
+
+        @for $i from 1 through $columns {
+            &:nth-child(#{$i}) {
+                animation-delay: calc(($i - 1) * 0.1s);
+            }
+        }
+    }
+}
+
+///
+/// Skeleton form field.
+///
+/// @param {Length} $label-width [80px] - Label width.
+/// @param {Length} $input-height [40px] - Input height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
+/// @param {Number} $border-radius [6px] - Input border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_form_field(
+    $label-width: 80px,
+    $input-height: 40px,
+    $bg-color: $skeleton-bg,
+    $border-radius: 6px,
+    $duration: 1.5s
+) {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .skeleton-label {
+        @include skeleton_text($label-width, 14px, $bg-color, 4px, $duration);
+    }
+
+    .skeleton-input {
+        width: 100%;
+        height: $input-height;
+        @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
+    }
+}
+
+///
+/// Skeleton button.
+///
+/// @param {Length} $width [120px] - Button width.
+/// @param {Length} $height [40px] - Button height.
+/// @param {Color} $bg-color [rgba(255,255,255,0.1)] - Skeleton background.
+/// @param {Number} $border-radius [6px] - Button border radius.
+/// @param {Time} $duration [1.5s] - Animation duration.
+///
+@mixin skeleton_button(
+    $width: 120px,
+    $height: 40px,
+    $bg-color: $skeleton-bg,
+    $border-radius: 6px,
+    $duration: 1.5s
+) {
+    width: $width;
+    height: $height;
+    @include loader_skeleton_shimmer($bg-color, $skeleton-highlight, $border-radius, $duration);
+}