osi-cards-lib 1.5.30 → 1.5.32

package/styles/components/sections/_visual-effects-library.scss

@@ -1,374 +0,0 @@
-// =====================================================================
-// VISUAL EFFECTS LIBRARY - Reusable Card & Item Effects
-// =====================================================================
-// Beautiful, polished effects that sections can apply
-// Extracted from best-looking sections (like analytics)
-
-@use "design-tokens" as *;
-
-// ═══════════════════════════════════════════════════════════════════
-// CARD HOVER EFFECTS - Analytics-Style Polish
-// ═══════════════════════════════════════════════════════════════════
-
-// The beautiful analytics card effect (shadow + accent line)
-@mixin analytics-card-effect {
-  position: relative;
-  transition:
-    box-shadow var(--duration-slow) var(--ease-out),
-    background var(--duration-slow) var(--ease-out);
-  cursor: default;
-
-  // Subtle gradient overlay for depth
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
-    opacity: 0;
-    transition: opacity var(--duration-slow) var(--ease-out);
-  }
-
-  &:hover {
-    box-shadow: var(--shadow-xl);
-    background: var(--osi-section-item-background-hover);
-
-    &::before {
-      opacity: 1;
-    }
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-// Enhanced shadow effect
-@mixin card-scale-lift {
-  transition:
-    box-shadow var(--duration-base) var(--ease-out),
-    background var(--duration-base) var(--ease-out);
-
-  &:hover {
-    box-shadow: var(--shadow-lg);
-    background: var(--osi-section-item-background-hover);
-  }
-}
-
-// List item hover effect (background + shadow)
-@mixin item-slide-right {
-  transition:
-    background var(--duration-base) var(--ease-out),
-    box-shadow var(--duration-base) var(--ease-out),
-    color var(--duration-base) var(--ease-out);
-
-  &:hover {
-    background: var(--surface-raised);
-    box-shadow: var(--shadow-sm);
-    color: var(--accent);
-  }
-}
-
-// Glow effect on hover
-@mixin card-glow-hover {
-  transition: all 300ms var(--ease-out);
-
-  &:hover {
-    box-shadow:
-      var(--shadow-md),
-      0 0 20px rgba(var(--accent-rgb, 255, 121, 0), 0.2);
-    border-color: var(--accent);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// METRIC VALUE ANIMATIONS - Analytics-Style
-// ═══════════════════════════════════════════════════════════════════
-
-// The nice metric value scale effect
-@mixin metric-value-effect {
-  transition: all 300ms var(--ease-out);
-
-  .metric-card:hover &,
-  .analytics-card:hover & {
-    transform: scale(1.05);
-    color: var(--accent);
-  }
-}
-
-// Number pulse effect
-@mixin number-pulse-effect {
-  animation: numberPulse 2s ease-in-out infinite;
-
-  @keyframes numberPulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.85;
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// PROGRESS BAR EFFECTS
-// ═══════════════════════════════════════════════════════════════════
-
-// Shimmer effect (from analytics)
-@mixin progress-shimmer {
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.3) 50%,
-      transparent 100%
-    );
-    animation: shimmer 2s infinite;
-  }
-
-  @keyframes shimmer {
-    0% {
-      left: -100%;
-    }
-    100% {
-      left: 100%;
-    }
-  }
-}
-
-// Progress pulse on hover
-@mixin progress-pulse-hover {
-  .metric-card:hover &,
-  .card:hover & {
-    animation: progressPulse 1s ease-in-out;
-  }
-
-  @keyframes progressPulse {
-    0%,
-    100% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.8;
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// ACCENT LINE EFFECTS
-// ═══════════════════════════════════════════════════════════════════
-
-// Animated top accent line (analytics style)
-@mixin accent-line-top {
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
-    opacity: 0;
-    transition: opacity 300ms var(--ease-out);
-  }
-
-  &:hover::before {
-    opacity: 1;
-  }
-}
-
-// Left accent border (quotations, highlights)
-@mixin accent-line-left {
-  border-left: 3px solid var(--accent);
-  padding-left: calc(var(--osi-default-card-padding) - 3px);
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// TREND ANIMATIONS
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin trend-bounce-animation {
-  .trend-icon,
-  .trend-arrow {
-    display: inline-block;
-    animation: trendBounce 1.5s ease-in-out infinite;
-  }
-
-  @keyframes trendBounce {
-    0%,
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
-    50% {
-      transform: translate3d(0, -2px, 0);
-    }
-  }
-
-  &:hover .trend-icon,
-  &:hover .trend-arrow {
-    animation-play-state: paused;
-    transform: scale(1.1);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// ZEBRA STRIPING (for lists)
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin zebra-striping {
-  &:nth-child(even) {
-    background: var(--surface-subtle);
-  }
-
-  &:hover {
-    background: var(--surface-raised);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// GLASS MORPHISM EFFECT
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin glass-card {
-  background: var(--glass-bg);
-  -webkit-backdrop-filter: blur(var(--blur-md));
-  backdrop-filter: blur(var(--blur-md));
-  border: 1px solid var(--glass-border);
-  box-shadow: var(--shadow-sm);
-
-  &:hover {
-    background: rgba(255, 255, 255, 0.12);
-    -webkit-backdrop-filter: blur(var(--blur-lg));
-    backdrop-filter: blur(var(--blur-lg));
-    box-shadow: var(--shadow-lg);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// ICON ANIMATIONS
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin icon-hover-scale {
-  .item-icon,
-  .card-icon {
-    transition: all 200ms var(--ease-out);
-  }
-
-  &:hover .item-icon,
-  &:hover .card-icon {
-    transform: scale(1.15);
-    color: var(--accent);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// GRADIENT BACKGROUNDS
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin gradient-background {
-  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-raised) 100%);
-}
-
-@mixin gradient-hover {
-  &:hover {
-    background: linear-gradient(135deg, var(--surface-raised) 0%, var(--surface-hover) 100%);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// FOCUS RING (Accessibility)
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin focus-ring {
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-    border-radius: var(--radius-sm);
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// LOADING STATE EFFECT
-// ═══════════════════════════════════════════════════════════════════
-
-@mixin loading-shimmer {
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      var(--osi-overlay-medium) 50%,
-      transparent 100%
-    );
-    transform: translateX(-100%);
-    animation: loadingShimmer 1.5s infinite;
-  }
-
-  @keyframes loadingShimmer {
-    0% {
-      transform: translate3d(-100%, 0, 0);
-    }
-    100% {
-      transform: translate3d(100%, 0, 0);
-    }
-  }
-}
-
-// ═══════════════════════════════════════════════════════════════════
-// COMBINED EFFECTS - Pre-built Combinations
-// ═══════════════════════════════════════════════════════════════════
-
-// Premium card effect (analytics-style)
-@mixin premium-card {
-  @include analytics-card-effect;
-  @include focus-ring;
-
-  // Additional polish
-  background: var(--osi-card-background);
-  border: var(--osi-card-border-width) solid var(--osi-card-border-color);
-  border-radius: var(--osi-card-border-radius);
-  padding: var(--osi-default-card-padding);
-}
-
-// Interactive list item
-@mixin interactive-list-item {
-  @include item-slide-right;
-  @include zebra-striping;
-  @include focus-ring;
-
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  padding: var(--osi-default-card-padding);
-}
-
-// Feature card (gallery, products)
-@mixin feature-card {
-  @include card-scale-lift;
-  @include accent-line-top;
-  @include focus-ring;
-
-  background: var(--osi-card-background);
-  border: var(--osi-card-border-width) solid var(--osi-card-border-color);
-  border-radius: var(--osi-card-border-radius);
-  padding: var(--osi-default-card-padding);
-}