osi-cards-lib 1.5.30 → 1.5.32

package/styles/mixins/_section-mixins.scss

@@ -1,280 +0,0 @@
-/**
- * Section Mixins
- *
- * Common SCSS mixins for section components to reduce duplication
- * and ensure consistent styling across all section types.
- */
-
-/**
- * Base section container styles
- * Apply to all section root elements
- */
-@mixin section-base {
-  padding: var(--section-padding, 1rem);
-  border-radius: var(--section-border-radius, 0.5rem);
-  background: var(--section-background, transparent);
-  transition: background var(--osi-card-transition-normal, 200ms) ease;
-}
-
-/**
- * Section header styles
- * Apply to section title/header elements
- */
-@mixin section-header {
-  font-size: var(--section-title-size, 1rem);
-  font-weight: var(--section-title-weight, 600);
-  color: var(--section-title-color, var(--osi-card-foreground));
-  margin-bottom: var(--section-header-gap, 0.75rem);
-  line-height: 1.3;
-}
-
-/**
- * Section footer styles
- * Apply to section footer elements
- */
-@mixin section-footer {
-  margin-top: var(--section-footer-gap, 0.75rem);
-  padding-top: var(--section-footer-gap, 0.75rem);
-  border-top: 1px solid var(--osi-card-border, #e5e7eb);
-  font-size: var(--section-footer-size, 0.75rem);
-  color: var(--osi-card-muted, #6b7280);
-}
-
-/**
- * Field grid layout for key-value pairs
- * @param $columns - Number of columns (default: 2)
- */
-@mixin section-field-grid($columns: 2) {
-  display: grid;
-  grid-template-columns: repeat($columns, 1fr);
-  gap: var(--section-field-gap, 0.75rem);
-
-  @media (max-width: 640px) {
-    grid-template-columns: 1fr; // Single column on mobile
-  }
-}
-
-/**
- * Field item styles (for individual fields)
- */
-@mixin field-item {
-  padding: var(--field-padding, 0.75rem);
-  border-radius: var(--field-border-radius, 0.375rem);
-  background: var(--field-background, rgba(0, 0, 0, 0.02));
-  border: 1px solid var(--field-border-color, transparent);
-  transition: all var(--osi-card-transition-fast, 150ms) ease;
-
-  &:hover {
-    background: var(--field-background-hover, rgba(0, 0, 0, 0.04));
-    border-color: var(--field-border-hover, var(--osi-card-border));
-  }
-}
-
-/**
- * Field label styles
- */
-@mixin field-label {
-  font-size: var(--field-label-size, 0.75rem);
-  font-weight: var(--field-label-weight, 500);
-  color: var(--field-label-color, var(--osi-card-muted));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.25rem;
-}
-
-/**
- * Field value styles
- */
-@mixin field-value {
-  font-size: var(--field-value-size, 0.875rem);
-  font-weight: var(--field-value-weight, 400);
-  color: var(--field-value-color, var(--osi-card-foreground));
-  line-height: 1.4;
-}
-
-/**
- * Item list layout (for list-based sections)
- */
-@mixin section-item-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--section-item-gap, 0.5rem);
-}
-
-/**
- * Individual item in a list
- */
-@mixin list-item {
-  padding: var(--item-padding, 0.75rem);
-  border-radius: var(--item-border-radius, 0.375rem);
-  background: var(--item-background, transparent);
-  border: 1px solid var(--item-border-color, var(--osi-card-border));
-  transition: all var(--osi-card-transition-fast, 150ms) ease;
-
-  &:hover {
-    background: var(--item-background-hover, rgba(0, 0, 0, 0.02));
-    border-color: var(--item-border-hover, var(--osi-card-accent));
-    transform: translateX(2px);
-  }
-}
-
-/**
- * Responsive grid that adapts to container size
- * @param $min-width - Minimum column width
- */
-@mixin responsive-grid($min-width: 260px) {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
-  gap: var(--grid-gap, 1rem);
-}
-
-/**
- * Compact mode for dense layouts
- */
-@mixin compact-mode {
-  padding: var(--section-padding-compact, 0.5rem);
-
-  .field-item {
-    padding: var(--field-padding-compact, 0.5rem);
-  }
-
-  .section-header {
-    font-size: var(--section-title-size-compact, 0.875rem);
-    margin-bottom: var(--section-header-gap-compact, 0.5rem);
-  }
-}
-
-/**
- * Loading state placeholder
- */
-@mixin loading-state {
-  opacity: 0.6;
-  pointer-events: none;
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
-    animation: loading-shimmer 1.5s infinite;
-  }
-
-  @keyframes loading-shimmer {
-    0% {
-      transform: translateX(-100%);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-}
-
-/**
- * Error state styling
- */
-@mixin error-state {
-  border-color: var(--osi-card-destructive, #ef4444);
-  background: rgba(239, 68, 68, 0.05);
-
-  .section-header {
-    color: var(--osi-card-destructive, #ef4444);
-  }
-}
-
-/**
- * Action bar at bottom of sections
- */
-@mixin section-action-bar {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 1rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid var(--osi-card-border, #e5e7eb);
-
-  button {
-    padding: 0.5rem 1rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--osi-card-transition-fast, 150ms) ease;
-
-    &:hover {
-      opacity: 0.9;
-    }
-  }
-}
-
-/**
- * Metric card styling (for analytics sections)
- */
-@mixin metric-card {
-  padding: var(--metric-padding, 1rem);
-  border-radius: var(--metric-border-radius, 0.5rem);
-  background: var(--metric-background, var(--osi-card-accent));
-  color: var(--metric-foreground, var(--osi-card-accent-foreground));
-  text-align: center;
-
-  .metric-value {
-    font-size: var(--metric-value-size, 1.5rem);
-    font-weight: var(--metric-value-weight, 700);
-    margin-bottom: 0.25rem;
-  }
-
-  .metric-label {
-    font-size: var(--metric-label-size, 0.75rem);
-    opacity: 0.9;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-  }
-}
-
-/**
- * Section with icon styling
- */
-@mixin section-with-icons {
-  .field-item,
-  .list-item {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-
-    .icon {
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      color: var(--osi-card-accent, #6366f1);
-    }
-  }
-}
-
-/**
- * Scrollable section container
- */
-@mixin scrollable-section($max-height: 400px) {
-  max-height: $max-height;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-
-  // Custom scrollbar
-  &::-webkit-scrollbar {
-    width: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: var(--osi-card-border, #e5e7eb);
-    border-radius: 4px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--osi-card-accent, #6366f1);
-    border-radius: 4px;
-
-    &:hover {
-      background: var(--osi-card-accent-hover, #4f46e5);
-    }
-  }
-}