osi-cards-lib 1.5.30 → 1.5.32

package/styles/components/sections/_utility-classes.scss

@@ -1,567 +0,0 @@
-// =====================================================================
-// UTILITY CLASSES
-// =====================================================================
-//
-// Optional utility classes for rapid development.
-// Can be used directly in templates for common patterns.
-//
-// =====================================================================
-
-@use "design-tokens" as *;
-
-// =====================================================================
-// SPACING UTILITIES
-// =====================================================================
-
-// Margin utilities
-.m-0 {
-  margin: 0;
-}
-.m-xs {
-  margin: var(--spacing-xs);
-}
-.m-sm {
-  margin: var(--spacing-sm);
-}
-.m-md {
-  margin: var(--spacing-md);
-}
-.m-base {
-  margin: var(--spacing-base);
-}
-.m-lg {
-  margin: var(--spacing-lg);
-}
-.m-xl {
-  margin: var(--spacing-xl);
-}
-
-// Margin top
-.mt-0 {
-  margin-top: 0;
-}
-.mt-xs {
-  margin-top: var(--spacing-xs);
-}
-.mt-sm {
-  margin-top: var(--spacing-sm);
-}
-.mt-md {
-  margin-top: var(--spacing-md);
-}
-.mt-base {
-  margin-top: var(--spacing-base);
-}
-.mt-lg {
-  margin-top: var(--spacing-lg);
-}
-
-// Margin bottom
-.mb-0 {
-  margin-bottom: 0;
-}
-.mb-xs {
-  margin-bottom: var(--spacing-xs);
-}
-.mb-sm {
-  margin-bottom: var(--spacing-sm);
-}
-.mb-md {
-  margin-bottom: var(--spacing-md);
-}
-.mb-base {
-  margin-bottom: var(--spacing-base);
-}
-.mb-lg {
-  margin-bottom: var(--spacing-lg);
-}
-
-// Padding utilities
-.p-0 {
-  padding: 0;
-}
-.p-xs {
-  padding: var(--spacing-xs);
-}
-.p-sm {
-  padding: var(--spacing-sm);
-}
-.p-md {
-  padding: var(--spacing-md);
-}
-.p-base {
-  padding: var(--spacing-base);
-}
-.p-lg {
-  padding: var(--spacing-lg);
-}
-.p-xl {
-  padding: var(--spacing-xl);
-}
-
-// Gap utilities (for flex/grid)
-.gap-0 {
-  gap: 0;
-}
-.gap-xs {
-  gap: var(--spacing-xs);
-}
-.gap-sm {
-  gap: var(--spacing-sm);
-}
-.gap-md {
-  gap: var(--spacing-md);
-}
-.gap-base {
-  gap: var(--spacing-base);
-}
-.gap-lg {
-  gap: var(--spacing-lg);
-}
-
-// =====================================================================
-// LAYOUT UTILITIES
-// =====================================================================
-
-// Display
-.d-none {
-  display: none;
-}
-.d-block {
-  display: block;
-}
-.d-inline {
-  display: inline;
-}
-.d-inline-block {
-  display: inline-block;
-}
-.d-flex {
-  display: flex;
-}
-.d-grid {
-  display: grid;
-}
-
-// Flexbox
-.flex-row {
-  flex-direction: row;
-}
-.flex-col {
-  flex-direction: column;
-}
-.flex-wrap {
-  flex-wrap: wrap;
-}
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-.items-center {
-  align-items: center;
-}
-.items-end {
-  align-items: flex-end;
-}
-.items-stretch {
-  align-items: stretch;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-.justify-center {
-  justify-content: center;
-}
-.justify-end {
-  justify-content: flex-end;
-}
-.justify-between {
-  justify-content: space-between;
-}
-.justify-around {
-  justify-content: space-around;
-}
-
-.flex-1 {
-  flex: 1;
-}
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-.flex-grow {
-  flex-grow: 1;
-}
-
-// Grid
-.grid-cols-1 {
-  grid-template-columns: repeat(1, 1fr);
-}
-.grid-cols-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-.grid-cols-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-.grid-cols-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-
-// =====================================================================
-// TYPOGRAPHY UTILITIES
-// =====================================================================
-
-.text-left {
-  text-align: left;
-}
-.text-center {
-  text-align: center;
-}
-.text-right {
-  text-align: right;
-}
-
-.text-xs {
-  font-size: var(--text-xs);
-}
-.text-sm {
-  font-size: var(--text-sm);
-}
-.text-base {
-  font-size: var(--text-base);
-}
-.text-lg {
-  font-size: var(--text-lg);
-}
-.text-xl {
-  font-size: var(--text-xl);
-}
-.text-2xl {
-  font-size: var(--text-2xl);
-}
-
-.font-light {
-  font-weight: var(--font-light);
-}
-.font-normal {
-  font-weight: var(--font-normal);
-}
-.font-medium {
-  font-weight: var(--font-medium);
-}
-.font-semibold {
-  font-weight: var(--font-semibold);
-}
-.font-bold {
-  font-weight: var(--font-bold);
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-.lowercase {
-  text-transform: lowercase;
-}
-.capitalize {
-  text-transform: capitalize;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// =====================================================================
-// COLOR UTILITIES
-// =====================================================================
-
-.text-primary {
-  color: var(--foreground);
-}
-.text-secondary {
-  color: var(--muted-foreground);
-}
-.text-accent {
-  color: var(--accent);
-}
-.text-success {
-  color: var(--status-success);
-}
-.text-warning {
-  color: var(--status-warning);
-}
-.text-error {
-  color: var(--status-error);
-}
-
-.bg-transparent {
-  background: transparent;
-}
-.bg-surface {
-  background: var(--osi-section-item-background);
-}
-.bg-raised {
-  background: var(--osi-section-item-background-hover);
-}
-.bg-muted {
-  background: var(--muted);
-}
-
-// =====================================================================
-// BORDER & RADIUS UTILITIES
-// =====================================================================
-
-.border {
-  border: 1px solid var(--border);
-}
-.border-0 {
-  border: none;
-}
-.border-t {
-  border-top: 1px solid var(--border);
-}
-.border-b {
-  border-bottom: 1px solid var(--border);
-}
-
-.rounded-none {
-  border-radius: 0;
-}
-.rounded-sm {
-  border-radius: var(--radius-sm);
-}
-.rounded {
-  border-radius: var(--radius-md);
-}
-.rounded-lg {
-  border-radius: var(--radius-lg);
-}
-.rounded-full {
-  border-radius: var(--radius-full);
-}
-
-// =====================================================================
-// SHADOW UTILITIES
-// =====================================================================
-
-.shadow-none {
-  box-shadow: none;
-}
-.shadow-sm {
-  box-shadow: var(--shadow-sm);
-}
-.shadow {
-  box-shadow: var(--shadow-md);
-}
-.shadow-lg {
-  box-shadow: var(--shadow-lg);
-}
-
-// =====================================================================
-// OPACITY UTILITIES
-// =====================================================================
-
-.opacity-0 {
-  opacity: 0;
-}
-.opacity-10 {
-  opacity: 0.1;
-}
-.opacity-20 {
-  opacity: 0.2;
-}
-.opacity-30 {
-  opacity: 0.3;
-}
-.opacity-40 {
-  opacity: 0.4;
-}
-.opacity-50 {
-  opacity: 0.5;
-}
-.opacity-60 {
-  opacity: 0.6;
-}
-.opacity-70 {
-  opacity: 0.7;
-}
-.opacity-80 {
-  opacity: 0.8;
-}
-.opacity-90 {
-  opacity: 0.9;
-}
-.opacity-100 {
-  opacity: 1;
-}
-
-// =====================================================================
-// POSITION UTILITIES
-// =====================================================================
-
-.relative {
-  position: relative;
-}
-.absolute {
-  position: absolute;
-}
-.fixed {
-  position: fixed;
-}
-.sticky {
-  position: sticky;
-}
-
-// =====================================================================
-// OVERFLOW UTILITIES
-// =====================================================================
-
-.overflow-hidden {
-  overflow: hidden;
-}
-.overflow-auto {
-  overflow: auto;
-}
-.overflow-x-auto {
-  overflow-x: auto;
-}
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-// =====================================================================
-// WIDTH & HEIGHT UTILITIES
-// =====================================================================
-
-.w-full {
-  width: 100%;
-}
-.w-auto {
-  width: auto;
-}
-.h-full {
-  height: 100%;
-}
-.h-auto {
-  height: auto;
-}
-
-.min-h-0 {
-  min-height: 0;
-}
-.min-w-0 {
-  min-width: 0;
-}
-
-// =====================================================================
-// CURSOR UTILITIES
-// =====================================================================
-
-.cursor-pointer {
-  cursor: pointer;
-}
-.cursor-default {
-  cursor: default;
-}
-.cursor-not-allowed {
-  cursor: not-allowed;
-}
-
-// =====================================================================
-// INTERACTION UTILITIES
-// =====================================================================
-
-.pointer-events-none {
-  pointer-events: none;
-}
-.pointer-events-auto {
-  pointer-events: auto;
-}
-
-.select-none {
-  user-select: none;
-}
-.select-text {
-  user-select: text;
-}
-
-// =====================================================================
-// VISIBILITY UTILITIES
-// =====================================================================
-
-.visible {
-  visibility: visible;
-}
-.invisible {
-  visibility: hidden;
-}
-
-// =====================================================================
-// RESPONSIVE UTILITIES (Mobile-first)
-// =====================================================================
-
-@media (min-width: 640px) {
-  .sm\\:d-block {
-    display: block;
-  }
-  .sm\\:d-flex {
-    display: flex;
-  }
-  .sm\\:d-grid {
-    display: grid;
-  }
-  .sm\\:d-none {
-    display: none;
-  }
-}
-
-@media (min-width: 768px) {
-  .md\\:d-block {
-    display: block;
-  }
-  .md\\:d-flex {
-    display: flex;
-  }
-  .md\\:d-grid {
-    display: grid;
-  }
-  .md\\:d-none {
-    display: none;
-  }
-
-  .md\\:grid-cols-2 {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  .md\\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .md\\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}
-
-@media (min-width: 1024px) {
-  .lg\\:d-block {
-    display: block;
-  }
-  .lg\\:d-flex {
-    display: flex;
-  }
-  .lg\\:d-grid {
-    display: grid;
-  }
-  .lg\\:d-none {
-    display: none;
-  }
-
-  .lg\\:grid-cols-3 {
-    grid-template-columns: repeat(3, 1fr);
-  }
-  .lg\\:grid-cols-4 {
-    grid-template-columns: repeat(4, 1fr);
-  }
-}