osi-cards-lib 1.5.32 → 1.5.34

package/styles/mixins/_section-mixins.scss

@@ -0,0 +1,280 @@
+/**
+ * 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);
+    }
+  }
+}