osi-cards-lib 1.5.30 → 1.5.32

package/styles/micro-interactions.scss

@@ -1,583 +0,0 @@
-/**
- * OSI Cards - Micro-Interactions
- *
- * Delightful micro-animations and interactions for enhanced UX.
- */
-
-// ============================================
-// Animation Variables
-// ============================================
-
-:root {
-  --osi-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
-  --osi-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-  --osi-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
-  --osi-ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
-  --osi-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
-
-  --osi-duration-instant: 50ms;
-  --osi-duration-fast: 150ms;
-  --osi-duration-normal: 250ms;
-  --osi-duration-slow: 400ms;
-  --osi-duration-slower: 600ms;
-}
-
-// Respect reduced motion preference
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --osi-duration-instant: 0ms;
-    --osi-duration-fast: 0ms;
-    --osi-duration-normal: 0ms;
-    --osi-duration-slow: 0ms;
-    --osi-duration-slower: 0ms;
-  }
-}
-
-// ============================================
-// Button Interactions
-// ============================================
-
-.osi-action-button {
-  position: relative;
-  overflow: hidden;
-  transition:
-    transform var(--osi-duration-fast) var(--osi-ease-out-quart),
-    box-shadow var(--osi-duration-fast) var(--osi-ease-out-quart),
-    background-color var(--osi-duration-fast) var(--osi-ease-out-quart);
-
-  // Ripple effect container
-  &::before {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: radial-gradient(
-      circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
-      rgba(255, 255, 255, 0.3) 0%,
-      transparent 70%
-    );
-    opacity: 0;
-    transform: scale(0);
-    transition:
-      opacity var(--osi-duration-normal) var(--osi-ease-out-quart),
-      transform var(--osi-duration-slow) var(--osi-ease-out-expo);
-  }
-
-  &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  }
-
-  &:active {
-    transform: translateY(0) scale(0.98);
-
-    &::before {
-      opacity: 1;
-      transform: scale(2);
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 2px var(--osi-card-background, #fff),
-      0 0 0 4px var(--osi-card-accent, #6366f1);
-  }
-}
-
-// ============================================
-// Card Hover Effects
-// ============================================
-
-.osi-card-container {
-  transition:
-    box-shadow var(--osi-duration-normal) var(--osi-ease-out-quart),
-    background var(--osi-duration-normal) var(--osi-ease-out-quart);
-
-  &:hover {
-    box-shadow:
-      0 12px 40px rgba(0, 0, 0, 0.12),
-      0 4px 8px rgba(0, 0, 0, 0.08);
-    background: var(--osi-section-item-background-hover, var(--osi-card-background));
-  }
-
-  // Subtle glow on hover
-  &::after {
-    content: "";
-    position: absolute;
-    inset: -2px;
-    border-radius: inherit;
-    background: linear-gradient(
-      135deg,
-      rgba(var(--osi-card-accent-rgb, 99, 102, 241), 0.1),
-      transparent 60%
-    );
-    opacity: 0;
-    z-index: -1;
-    transition: opacity var(--osi-duration-normal) var(--osi-ease-out-quart);
-  }
-
-  &:hover::after {
-    opacity: 1;
-  }
-}
-
-// ============================================
-// Section Entrance Animations
-// ============================================
-
-@keyframes section-enter {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 20px, 0) scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-@keyframes section-enter-left {
-  from {
-    opacity: 0;
-    transform: translate3d(-20px, 0, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes section-enter-scale {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 0, 0) scale(0.9);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-.ai-section {
-  animation: section-enter var(--osi-duration-slow) var(--osi-ease-out-expo) both;
-
-  @for $i from 1 through 10 {
-    &:nth-child(#{$i}) {
-      animation-delay: #{$i * 80}ms;
-    }
-  }
-}
-
-// ============================================
-// Field Value Reveal
-// ============================================
-
-@keyframes value-reveal {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 8px, 0);
-    filter: blur(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-    filter: blur(0);
-  }
-}
-
-.field-value {
-  animation: value-reveal var(--osi-duration-normal) var(--osi-ease-out-quart) both;
-}
-
-// ============================================
-// Metric Counter Animation
-// ============================================
-
-@keyframes metric-pop {
-  0% {
-    transform: translate3d(0, 0, 0) scale(0.8);
-    opacity: 0;
-  }
-  50% {
-    transform: translate3d(0, 0, 0) scale(1.05);
-  }
-  100% {
-    transform: translate3d(0, 0, 0) scale(1);
-    opacity: 1;
-  }
-}
-
-.metric-value {
-  animation: metric-pop var(--osi-duration-slow) var(--osi-spring) both;
-}
-
-// ============================================
-// Trend Indicator Animation
-// ============================================
-
-@keyframes trend-up {
-  0% {
-    transform: translate3d(0, 4px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-@keyframes trend-down {
-  0% {
-    transform: translate3d(0, -4px, 0);
-    opacity: 0;
-  }
-  100% {
-    transform: translate3d(0, 0, 0);
-    opacity: 1;
-  }
-}
-
-.trend-indicator {
-  &--up {
-    animation: trend-up var(--osi-duration-normal) var(--osi-ease-out-back) both;
-    color: var(--osi-card-success, #22c55e);
-  }
-
-  &--down {
-    animation: trend-down var(--osi-duration-normal) var(--osi-ease-out-back) both;
-    color: var(--osi-card-destructive, #ef4444);
-  }
-}
-
-// ============================================
-// Progress Bar Animation
-// ============================================
-
-@keyframes progress-fill {
-  from {
-    transform: scaleX(0);
-  }
-  to {
-    transform: scaleX(var(--progress, 0));
-  }
-}
-
-.progress-bar {
-  position: relative;
-  height: 8px;
-  background: var(--osi-card-border, #e5e7eb);
-  border-radius: 4px;
-  overflow: hidden;
-
-  &__fill {
-    position: absolute;
-    inset: 0;
-    background: var(--osi-card-accent, #6366f1);
-    transform-origin: left;
-    animation: progress-fill var(--osi-duration-slower) var(--osi-ease-out-expo) both;
-    animation-delay: var(--osi-duration-fast);
-  }
-
-  // Shimmer effect
-  &::after {
-    content: "";
-    position: absolute;
-    inset: 0;
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      rgba(255, 255, 255, 0.4) 50%,
-      transparent 100%
-    );
-    transform: translateX(-100%);
-    animation: shimmer 2s infinite;
-  }
-}
-
-@keyframes shimmer {
-  to {
-    transform: translateX(100%);
-  }
-}
-
-// ============================================
-// Skeleton Loading
-// ============================================
-
-@keyframes skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
-}
-
-@keyframes skeleton-wave {
-  0% {
-    background-position: -200% 0;
-  }
-  100% {
-    background-position: 200% 0;
-  }
-}
-
-.skeleton {
-  background: linear-gradient(
-    90deg,
-    var(--osi-card-border, #e5e7eb) 0%,
-    #f3f4f6 50%,
-    var(--osi-card-border, #e5e7eb) 100%
-  );
-  background-size: 200% 100%;
-  animation: skeleton-wave 1.5s ease-in-out infinite;
-  border-radius: 4px;
-}
-
-// ============================================
-// Icon Interactions
-// ============================================
-
-.icon-interactive {
-  transition:
-    transform var(--osi-duration-fast) var(--osi-ease-out-back),
-    color var(--osi-duration-fast) var(--osi-ease-out-quart);
-
-  &:hover {
-    transform: scale(1.15);
-    color: var(--osi-card-accent, #6366f1);
-  }
-
-  &:active {
-    transform: scale(0.95);
-  }
-}
-
-// Rotating refresh icon
-.icon-spin {
-  animation: icon-rotate 1s linear infinite;
-}
-
-@keyframes icon-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-// ============================================
-// Checkbox/Toggle Animations
-// ============================================
-
-@keyframes check-mark {
-  0% {
-    stroke-dashoffset: 24;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-.checkbox-icon {
-  stroke-dasharray: 24;
-  stroke-dashoffset: 24;
-
-  .checkbox:checked ~ & {
-    animation: check-mark var(--osi-duration-normal) var(--osi-ease-out-quart) forwards;
-  }
-}
-
-// ============================================
-// Tooltip Animation
-// ============================================
-
-@keyframes tooltip-enter {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 4px, 0) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) scale(1);
-  }
-}
-
-.tooltip {
-  animation: tooltip-enter var(--osi-duration-fast) var(--osi-ease-out-quart) both;
-}
-
-// ============================================
-// Card Actions Stagger
-// ============================================
-
-.osi-card-actions {
-  .osi-action-button {
-    @for $i from 1 through 5 {
-      &:nth-child(#{$i}) {
-        animation: section-enter var(--osi-duration-normal) var(--osi-ease-out-quart) both;
-        animation-delay: #{300 + ($i * 50)}ms;
-      }
-    }
-  }
-}
-
-// ============================================
-// Streaming Effect
-// ============================================
-
-@keyframes typing-cursor {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0;
-  }
-}
-
-.streaming-cursor {
-  display: inline-block;
-  width: 2px;
-  height: 1em;
-  background: var(--osi-card-accent, #6366f1);
-  animation: typing-cursor 0.8s ease-in-out infinite;
-  vertical-align: text-bottom;
-  margin-left: 2px;
-}
-
-// ============================================
-// Focus Ring Animation
-// ============================================
-
-@keyframes focus-ring-pulse {
-  0%,
-  100% {
-    box-shadow:
-      0 0 0 2px var(--osi-card-background, #fff),
-      0 0 0 4px var(--osi-card-accent, #6366f1);
-  }
-  50% {
-    box-shadow:
-      0 0 0 2px var(--osi-card-background, #fff),
-      0 0 0 6px rgba(var(--osi-card-accent-rgb, 99, 102, 241), 0.5);
-  }
-}
-
-.focus-animated:focus-visible {
-  outline: none;
-  animation: focus-ring-pulse 1.5s ease-in-out infinite;
-}
-
-// ============================================
-// Shake Animation (for errors)
-// ============================================
-
-@keyframes shake {
-  0%,
-  100% {
-    transform: translate3d(0, 0, 0);
-  }
-  10%,
-  30%,
-  50%,
-  70%,
-  90% {
-    transform: translate3d(-4px, 0, 0);
-  }
-  20%,
-  40%,
-  60%,
-  80% {
-    transform: translate3d(4px, 0, 0);
-  }
-}
-
-.shake {
-  animation: shake var(--osi-duration-slow) var(--osi-ease-out-quart);
-}
-
-// ============================================
-// Success Animation
-// ============================================
-
-@keyframes success-pop {
-  0% {
-    transform: translate3d(0, 0, 0) scale(0);
-    opacity: 0;
-  }
-  50% {
-    transform: translate3d(0, 0, 0) scale(1.2);
-  }
-  100% {
-    transform: translate3d(0, 0, 0) scale(1);
-    opacity: 1;
-  }
-}
-
-.success-icon {
-  animation: success-pop var(--osi-duration-normal) var(--osi-spring) both;
-}
-
-// ============================================
-// Fade In/Out Utilities
-// ============================================
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.fade-in {
-  animation: fade-in var(--osi-duration-normal) var(--osi-ease-out-quart) both;
-}
-
-.fade-out {
-  animation: fade-out var(--osi-duration-normal) var(--osi-ease-out-quart) both;
-}
-
-// ============================================
-// Slide Utilities
-// ============================================
-
-@keyframes slide-in-up {
-  from {
-    opacity: 0;
-    transform: translate3d(0, 16px, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes slide-in-down {
-  from {
-    opacity: 0;
-    transform: translate3d(0, -16px, 0);
-  }
-  to {
-    opacity: 1;
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.slide-in-up {
-  animation: slide-in-up var(--osi-duration-normal) var(--osi-ease-out-quart) both;
-}
-
-.slide-in-down {
-  animation: slide-in-down var(--osi-duration-normal) var(--osi-ease-out-quart) both;
-}