cybercore-css 0.2.0

package/src/scss/components/_spinner.scss

@@ -0,0 +1,300 @@
+// ============================================================
+// Spinner Component
+// Dual-ring counter-rotating loading spinner
+// ============================================================
+
+@layer components {
+  .cyber-spinner {
+    --spinner-size: 48px;
+    --spinner-color-primary: var(--cyber-cyan-500);
+    --spinner-color-secondary: var(--cyber-magenta-500);
+    --spinner-thickness: 3px;
+
+    position: relative;
+    display: inline-block;
+    width: var(--spinner-size);
+    height: var(--spinner-size);
+
+    // Both rings share common styles
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      border: var(--spinner-thickness) solid transparent;
+      border-radius: 50%;
+      inset: 0;
+      will-change: transform;
+    }
+
+    // Outer ring (clockwise) - cyan top border
+    &::before {
+      animation: spin 1s linear infinite;
+      border-top-color: var(--spinner-color-primary);
+    }
+
+    // Inner ring (counter-clockwise) - magenta bottom border
+    &::after {
+      animation: spin 1s linear infinite reverse;
+      animation-delay: -0.5s;
+      border-bottom-color: var(--spinner-color-secondary);
+    }
+
+    // --------------------------------------------------------
+    // Size Variants
+    // --------------------------------------------------------
+
+    &--xs {
+      --spinner-size: 16px;
+      --spinner-thickness: 2px;
+    }
+
+    &--sm {
+      --spinner-size: 24px;
+      --spinner-thickness: 2px;
+    }
+
+    &--md {
+      --spinner-size: 48px;
+      --spinner-thickness: 3px;
+    }
+
+    &--lg {
+      --spinner-size: 64px;
+      --spinner-thickness: 4px;
+    }
+
+    &--xl {
+      --spinner-size: 96px;
+      --spinner-thickness: 5px;
+    }
+
+    // --------------------------------------------------------
+    // Color Variants
+    // --------------------------------------------------------
+
+    &--magenta {
+      --spinner-color-primary: var(--cyber-magenta-500);
+      --spinner-color-secondary: var(--cyber-cyan-500);
+    }
+
+    &--yellow {
+      --spinner-color-primary: var(--cyber-yellow-500);
+      --spinner-color-secondary: var(--cyber-cyan-500);
+    }
+
+    &--green {
+      --spinner-color-primary: var(--cyber-green-500);
+      --spinner-color-secondary: var(--cyber-cyan-500);
+    }
+
+    &--chrome {
+      --spinner-color-primary: var(--cyber-chrome-400);
+      --spinner-color-secondary: var(--cyber-chrome-600);
+    }
+
+    // --------------------------------------------------------
+    // Style Variants
+    // --------------------------------------------------------
+
+    // Single ring only
+    &--single {
+      &::after {
+        display: none;
+      }
+    }
+
+    // Dotted style
+    &--dotted {
+      &::before {
+        border-width: calc(var(--spinner-thickness) + 1px);
+        border-style: dotted;
+      }
+
+      &::after {
+        border-width: calc(var(--spinner-thickness) + 1px);
+        border-style: dotted;
+      }
+    }
+
+    // Glow effect
+    &--glow {
+      &::before {
+        filter: drop-shadow(0 0 4px var(--spinner-color-primary));
+      }
+
+      &::after {
+        filter: drop-shadow(0 0 4px var(--spinner-color-secondary));
+      }
+    }
+
+    // Pulse animation added
+    &--pulse {
+      animation: spinner-pulse 1.5s ease-in-out infinite;
+    }
+  }
+
+  // Spinner rotation
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  // Pulse animation
+  @keyframes spinner-pulse {
+    0%,
+    100% {
+      opacity: 100%;
+      transform: scale(1);
+    }
+
+    50% {
+      opacity: 60%;
+      transform: scale(0.9);
+    }
+  }
+
+  // --------------------------------------------------------
+  // Alternative Spinner Styles
+  // --------------------------------------------------------
+
+  // Dot spinner (three bouncing dots)
+  .cyber-spinner-dots {
+    --dot-size: 8px;
+    --dot-color: var(--cyber-cyan-500);
+
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+
+    span {
+      width: var(--dot-size);
+      height: var(--dot-size);
+      border-radius: 50%;
+      background: var(--dot-color);
+      animation: spinner-dots-bounce 1.4s ease-in-out infinite;
+
+      &:nth-child(1) {
+        animation-delay: 0s;
+      }
+
+      &:nth-child(2) {
+        animation-delay: 0.16s;
+      }
+
+      &:nth-child(3) {
+        animation-delay: 0.32s;
+      }
+    }
+
+    &--magenta {
+      --dot-color: var(--cyber-magenta-500);
+    }
+
+    &--yellow {
+      --dot-color: var(--cyber-yellow-500);
+    }
+
+    &--green {
+      --dot-color: var(--cyber-green-500);
+    }
+  }
+
+  @keyframes spinner-dots-bounce {
+    0%,
+    80%,
+    100% {
+      opacity: 50%;
+      transform: scale(0.6);
+    }
+
+    40% {
+      opacity: 100%;
+      transform: scale(1);
+    }
+  }
+
+  // Bar spinner (loading bars)
+  .cyber-spinner-bars {
+    --bar-width: 4px;
+    --bar-height: 24px;
+    --bar-color: var(--cyber-cyan-500);
+
+    display: inline-flex;
+    gap: 3px;
+    align-items: center;
+
+    span {
+      width: var(--bar-width);
+      height: var(--bar-height);
+      background: var(--bar-color);
+      animation: spinner-bars-scale 1.2s ease-in-out infinite;
+
+      @for $i from 1 through 5 {
+        &:nth-child(#{$i}) {
+          animation-delay: #{($i - 1) * 0.1}s;
+        }
+      }
+    }
+
+    &--magenta {
+      --bar-color: var(--cyber-magenta-500);
+    }
+
+    &--yellow {
+      --bar-color: var(--cyber-yellow-500);
+    }
+
+    &--green {
+      --bar-color: var(--cyber-green-500);
+    }
+  }
+
+  @keyframes spinner-bars-scale {
+    0%,
+    40%,
+    100% {
+      transform: scaleY(0.4);
+    }
+
+    20% {
+      transform: scaleY(1);
+    }
+  }
+
+  // Reduced motion support for accessibility
+  @media (prefers-reduced-motion: reduce) {
+    .cyber-spinner,
+    .cyber-spinner::before,
+    .cyber-spinner::after {
+      animation: none;
+    }
+
+    .cyber-spinner-dots span,
+    .cyber-spinner-bars span {
+      animation: none;
+    }
+  }
+
+  // Loading overlay
+  .cyber-spinner-overlay {
+    position: absolute;
+    z-index: var(--z-modal);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-sm);
+    align-items: center;
+    justify-content: center;
+    background: color-mix(in srgb, var(--cyber-void-500) 90%, transparent);
+    backdrop-filter: blur(4px);
+    inset: 0;
+
+    &__text {
+      font-family: var(--font-mono);
+      font-size: var(--text-sm);
+      letter-spacing: var(--tracking-wider);
+      text-transform: uppercase;
+      color: var(--color-text-secondary);
+    }
+  }
+}

package/src/scss/components/_tables.scss

@@ -0,0 +1,244 @@
+// ============================================================
+// Tables Component
+// Data tables with cyber styling
+// ============================================================
+
+@layer components {
+  .cyber-table {
+    width: 100%;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    border-collapse: collapse;
+
+    // Table header
+    thead {
+      background: var(--color-bg-tertiary);
+
+      th {
+        padding: var(--space-sm);
+        border-bottom: 2px solid var(--cyber-cyan-500);
+        font-family: var(--font-display);
+        font-weight: 700;
+        letter-spacing: 0.05em;
+        text-align: left;
+        text-transform: uppercase;
+        color: var(--cyber-cyan-500);
+
+        // Sortable header indicator
+        &[data-sortable] {
+          cursor: pointer;
+          user-select: none;
+
+          &::after {
+            content: "";
+            display: inline-block;
+            width: 0;
+            height: 0;
+            margin-left: var(--space-xs);
+            border-top: 4px solid currentcolor;
+            border-right: 4px solid transparent;
+            border-left: 4px solid transparent;
+            opacity: 30%;
+            transition: opacity var(--transition-fast);
+            vertical-align: middle;
+          }
+
+          &:hover::after {
+            opacity: 70%;
+          }
+
+          &[data-sort="asc"]::after {
+            border-top: none;
+            border-bottom: 4px solid currentcolor;
+            opacity: 100%;
+          }
+
+          &[data-sort="desc"]::after {
+            opacity: 100%;
+          }
+        }
+      }
+    }
+
+    // Table body
+    tbody {
+      tr {
+        transition: background var(--duration-fast);
+
+        &:hover {
+          background: color-mix(in srgb, var(--cyber-cyan-500) 5%, transparent);
+        }
+      }
+
+      td {
+        padding: var(--space-sm);
+        border-bottom: 1px solid var(--color-border-default);
+      }
+    }
+
+    // Table footer
+    tfoot {
+      background: var(--color-bg-tertiary);
+
+      td {
+        padding: var(--space-sm);
+        border-top: 1px solid var(--color-border-default);
+        font-weight: 600;
+        color: var(--color-text-primary);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Striped Variant
+    // --------------------------------------------------------
+
+    &--striped {
+      tbody tr:nth-child(even) {
+        background: color-mix(in srgb, var(--cyber-void-500) 50%, transparent);
+      }
+
+      tbody tr:nth-child(even):hover {
+        background: color-mix(in srgb, var(--cyber-cyan-500) 8%, transparent);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Bordered Variant
+    // --------------------------------------------------------
+
+    &--bordered {
+      th,
+      td {
+        border: var(--border-thin) solid var(--color-border-default);
+      }
+
+      thead th {
+        border-bottom-color: var(--cyber-cyan-500);
+        border-bottom-width: var(--border-medium);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Compact Variant
+    // --------------------------------------------------------
+
+    &--compact {
+      font-size: var(--text-xs);
+
+      thead th,
+      tbody td,
+      tfoot td {
+        padding: var(--space-xs);
+      }
+    }
+
+    // --------------------------------------------------------
+    // Responsive wrapper
+    // --------------------------------------------------------
+
+    &-wrapper {
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+
+      // Fade edges to indicate scroll
+      &::before,
+      &::after {
+        content: "";
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 20px;
+        opacity: 0%;
+        transition: opacity var(--transition-fast);
+        pointer-events: none;
+      }
+
+      &::before {
+        left: 0;
+        background: linear-gradient(90deg, var(--color-bg-primary), transparent);
+      }
+
+      &::after {
+        right: 0;
+        background: linear-gradient(-90deg, var(--color-bg-primary), transparent);
+      }
+
+      &[data-scroll-left]::before {
+        opacity: 100%;
+      }
+
+      &[data-scroll-right]::after {
+        opacity: 100%;
+      }
+    }
+
+    // --------------------------------------------------------
+    // Cell utilities
+    // --------------------------------------------------------
+
+    .cell-number {
+      font-family: var(--font-mono);
+      text-align: right;
+    }
+
+    .cell-status {
+      display: inline-flex;
+      gap: var(--space-2xs);
+      align-items: center;
+
+      &::before {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--cyber-chrome-500);
+      }
+
+      &--active::before {
+        background: var(--cyber-green-500);
+        box-shadow: 0 0 6px var(--cyber-green-500);
+      }
+
+      &--inactive::before {
+        background: var(--cyber-chrome-600);
+      }
+
+      &--pending::before {
+        background: var(--cyber-yellow-500);
+        animation: status-pulse 1.5s ease-in-out infinite;
+      }
+
+      &--error::before {
+        background: var(--cyber-magenta-500);
+      }
+    }
+
+    .cell-actions {
+      display: flex;
+      gap: var(--space-2xs);
+      justify-content: flex-end;
+    }
+
+    // Highlighted row
+    tr.row-highlight {
+      border-left: var(--border-thick) solid var(--cyber-cyan-500);
+      background: color-mix(in srgb, var(--cyber-cyan-500) 10%, transparent);
+    }
+
+    // Selected row
+    tr.row-selected {
+      background: color-mix(in srgb, var(--cyber-cyan-500) 15%, transparent);
+    }
+  }
+
+  @keyframes status-pulse {
+    0%,
+    100% {
+      opacity: 100%;
+    }
+
+    50% {
+      opacity: 40%;
+    }
+  }
+}