@quazardous/qdadm 1.19.3

package/src/styles/_alerts.scss

@@ -0,0 +1,95 @@
+/**
+ * Alert and Notice Boxes
+ * Warning, info, and system notice styles
+ */
+
+@use 'variables' as *;
+
+// Warning banner (yellow) - for system notices
+.alert-warning {
+  background: var(--p-yellow-50);
+  padding: $space-md;
+  margin-bottom: $space-md;
+  border-radius: $radius-lg;
+  border: $border-width solid var(--p-yellow-200);
+}
+
+.alert-warning-icon {
+  color: var(--p-yellow-600);
+}
+
+.alert-warning-text {
+  margin-left: $space-sm;
+  color: var(--p-yellow-700);
+}
+
+// Info banner (orange) - for important notices
+.alert-info {
+  color: var(--p-orange-600);
+  margin-bottom: $space-md;
+}
+
+// Key info panel - for displaying read-only metadata
+.key-info-panel {
+  background: var(--p-surface-50);
+  padding: $space-md;
+  margin-bottom: $space-md;
+  border-radius: $radius-lg;
+}
+
+.key-info-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-xl;
+  align-items: center;
+}
+
+.key-info-item small {
+  color: var(--p-surface-500);
+  display: block;
+}
+
+// =============================================================================
+// InfoBanner Component Styles
+// =============================================================================
+
+// Global styles for PrimeVue Message when used as InfoBanner
+.info-banner {
+  margin-top: $space-md;
+  margin-bottom: $space-md;
+
+  // No top margin if first child
+  &:first-child {
+    margin-top: 0;
+  }
+
+  // Ensure consistent padding
+  .p-message-content {
+    padding: $space-sm $space-md;
+  }
+
+  // Remove default icon from PrimeVue Message (we use our own)
+  .p-message-icon {
+    display: none;
+  }
+}
+
+// InfoBanner content layout
+.info-banner-content {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.info-banner-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+.info-banner-text {
+  flex: 1;
+
+  strong {
+    font-weight: 600;
+  }
+}

package/src/styles/_buttons.scss

@@ -0,0 +1,391 @@
+/**
+ * qdadm - Button Styles
+ *
+ * Global button styling - outlined style as default
+ * with severity variants (primary, secondary, success, warn, danger)
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Base Button - Outlined by Default
+// =============================================================================
+
+.p-button {
+  // Outlined style as default (use !important to override PrimeVue theme)
+  background: transparent !important;
+  border: 1px solid var(--p-primary-500) !important;
+  color: var(--p-primary-500) !important;
+  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
+
+  &:hover:not(:disabled) {
+    background: var(--p-primary-50) !important;
+    border-color: var(--p-primary-600) !important;
+    color: var(--p-primary-600) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-primary-200);
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+}
+
+// =============================================================================
+// Severity Variants
+// =============================================================================
+
+// Secondary (gray)
+.p-button-secondary {
+  border-color: var(--p-surface-400) !important;
+  color: var(--p-surface-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-surface-100) !important;
+    border-color: var(--p-surface-500) !important;
+    color: var(--p-surface-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-surface-200);
+  }
+}
+
+// Success (green)
+.p-button-success {
+  border-color: var(--p-green-500) !important;
+  color: var(--p-green-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-green-50) !important;
+    border-color: var(--p-green-600) !important;
+    color: var(--p-green-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-green-200);
+  }
+}
+
+// Warning (orange)
+.p-button-warn {
+  border-color: var(--p-orange-500) !important;
+  color: var(--p-orange-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-orange-50) !important;
+    border-color: var(--p-orange-600) !important;
+    color: var(--p-orange-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-orange-200);
+  }
+}
+
+// Danger (red)
+.p-button-danger {
+  border-color: var(--p-red-500) !important;
+  color: var(--p-red-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-red-50) !important;
+    border-color: var(--p-red-600) !important;
+    color: var(--p-red-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-red-200);
+  }
+}
+
+// Info (blue)
+.p-button-info {
+  border-color: var(--p-blue-500) !important;
+  color: var(--p-blue-600) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-blue-50) !important;
+    border-color: var(--p-blue-600) !important;
+    color: var(--p-blue-700) !important;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 2px var(--p-surface-0), 0 0 0 4px var(--p-blue-200);
+  }
+}
+
+// Contrast (dark)
+.p-button-contrast {
+  border-color: var(--p-surface-900) !important;
+  color: var(--p-surface-900) !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-surface-900) !important;
+    border-color: var(--p-surface-900) !important;
+    color: var(--p-surface-0) !important;
+  }
+}
+
+// =============================================================================
+// Filled Variant (explicit)
+// =============================================================================
+
+.p-button-filled,
+.p-button.p-button-raised {
+  background: var(--p-primary-500) !important;
+  border-color: var(--p-primary-500) !important;
+  color: white !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-primary-600) !important;
+    border-color: var(--p-primary-600) !important;
+    color: white !important;
+  }
+
+  &.p-button-secondary {
+    background: var(--p-surface-500) !important;
+    border-color: var(--p-surface-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-surface-600) !important;
+      border-color: var(--p-surface-600) !important;
+    }
+  }
+
+  &.p-button-success {
+    background: var(--p-green-500) !important;
+    border-color: var(--p-green-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-green-600) !important;
+      border-color: var(--p-green-600) !important;
+    }
+  }
+
+  &.p-button-warn {
+    background: var(--p-orange-500) !important;
+    border-color: var(--p-orange-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-orange-600) !important;
+      border-color: var(--p-orange-600) !important;
+    }
+  }
+
+  &.p-button-danger {
+    background: var(--p-red-500) !important;
+    border-color: var(--p-red-500) !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-red-600) !important;
+      border-color: var(--p-red-600) !important;
+    }
+  }
+}
+
+// =============================================================================
+// Text Button (no border)
+// =============================================================================
+
+.p-button-text {
+  background: transparent !important;
+  border-color: transparent !important;
+
+  &:hover:not(:disabled) {
+    background: var(--p-primary-50) !important;
+    border-color: transparent !important;
+  }
+
+  &.p-button-secondary:hover:not(:disabled) {
+    background: var(--p-surface-100) !important;
+  }
+
+  &.p-button-success:hover:not(:disabled) {
+    background: var(--p-green-50) !important;
+  }
+
+  &.p-button-warn:hover:not(:disabled) {
+    background: var(--p-orange-50) !important;
+  }
+
+  &.p-button-danger:hover:not(:disabled) {
+    background: var(--p-red-50) !important;
+  }
+}
+
+// =============================================================================
+// Link Button
+// =============================================================================
+
+.p-button-link {
+  background: transparent !important;
+  border-color: transparent !important;
+  color: var(--p-primary-500) !important;
+  text-decoration: none;
+
+  &:hover:not(:disabled) {
+    background: transparent !important;
+    border-color: transparent !important;
+    text-decoration: underline;
+  }
+}
+
+// =============================================================================
+// Icon-only Button - Keep original PrimeVue style (no outlined override)
+// =============================================================================
+
+.p-button-icon-only {
+  // Reset to PrimeVue defaults - no outlined style for icon buttons
+  background: unset !important;
+  border: unset !important;
+  color: unset !important;
+
+  &:hover:not(:disabled) {
+    background: unset !important;
+    border-color: unset !important;
+    color: unset !important;
+  }
+}
+
+// =============================================================================
+// Button Sizes
+// =============================================================================
+
+.p-button-sm {
+  font-size: $font-size-sm;
+  padding: 0.375rem 0.75rem;
+}
+
+.p-button-lg {
+  font-size: $font-size-lg;
+  padding: 0.75rem 1.25rem;
+}
+
+// =============================================================================
+// Tags / Badges - Outlined Style
+// =============================================================================
+
+.p-tag {
+  background: transparent !important;
+  border: 1px solid var(--p-primary-500) !important;
+  color: var(--p-primary-500) !important;
+  font-weight: normal !important;
+  white-space: nowrap;
+}
+
+.p-tag-secondary {
+  background: transparent !important;
+  border-color: var(--p-surface-400) !important;
+  color: var(--p-surface-600) !important;
+}
+
+.p-tag-success {
+  background: transparent !important;
+  border-color: var(--p-green-500) !important;
+  color: var(--p-green-600) !important;
+}
+
+.p-tag-warn {
+  background: transparent !important;
+  border-color: var(--p-orange-500) !important;
+  color: var(--p-orange-600) !important;
+}
+
+.p-tag-danger {
+  background: transparent !important;
+  border-color: var(--p-red-500) !important;
+  color: var(--p-red-600) !important;
+}
+
+.p-tag-info {
+  background: transparent !important;
+  border-color: var(--p-blue-500) !important;
+  color: var(--p-blue-600) !important;
+}
+
+.p-tag-contrast {
+  background: transparent !important;
+  border-color: var(--p-surface-900) !important;
+  color: var(--p-surface-900) !important;
+}
+
+// =============================================================================
+// SplitButton - Outlined Style
+// =============================================================================
+
+.p-splitbutton {
+  // Main button
+  .p-splitbutton-defaultbutton {
+    border: 1px solid var(--p-primary-500) !important;
+    border-right: none !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+    background: transparent !important;
+    color: var(--p-primary-500) !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-primary-50) !important;
+    }
+  }
+
+  // Dropdown button
+  .p-splitbutton-dropdown {
+    border: 1px solid var(--p-primary-500) !important;
+    border-left: none !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+    background: transparent !important;
+    color: var(--p-primary-500) !important;
+
+    &:hover:not(:disabled) {
+      background: var(--p-primary-50) !important;
+    }
+  }
+
+  // Danger severity
+  &.p-splitbutton-danger {
+    .p-splitbutton-defaultbutton,
+    .p-splitbutton-dropdown {
+      border-color: var(--p-red-500) !important;
+      color: var(--p-red-600) !important;
+
+      &:hover:not(:disabled) {
+        background: var(--p-red-50) !important;
+      }
+    }
+  }
+
+  // Secondary severity
+  &.p-splitbutton-secondary {
+    .p-splitbutton-defaultbutton,
+    .p-splitbutton-dropdown {
+      border-color: var(--p-surface-400) !important;
+      color: var(--p-surface-600) !important;
+
+      &:hover:not(:disabled) {
+        background: var(--p-surface-100) !important;
+      }
+    }
+  }
+
+  // Success severity
+  &.p-splitbutton-success {
+    .p-splitbutton-defaultbutton,
+    .p-splitbutton-dropdown {
+      border-color: var(--p-green-500) !important;
+      color: var(--p-green-600) !important;
+
+      &:hover:not(:disabled) {
+        background: var(--p-green-50) !important;
+      }
+    }
+  }
+}

package/src/styles/_cards.scss

@@ -0,0 +1,241 @@
+/**
+ * Card Grid Systems
+ * CardsGrid and RichCardsGrid layouts and stat cards
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Cards Grid (simple stat cards)
+// =============================================================================
+
+.cards-grid {
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+
+  &--cols-auto {
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  }
+
+  &--cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  &--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.stat-card,
+.card-custom {
+  background: var(--p-surface-0);
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+}
+
+.stat-card {
+  text-align: center;
+
+  &--clickable {
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:hover {
+      border-color: var(--p-primary-300);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    }
+  }
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--p-primary-500);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+
+  &--success {
+    color: var(--p-green-500);
+  }
+
+  &--danger {
+    color: var(--p-red-500);
+  }
+
+  &--warning {
+    color: var(--p-orange-500);
+  }
+
+  &--info {
+    color: var(--p-blue-500);
+  }
+}
+
+.stat-icon {
+  font-size: 1.5rem;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--p-surface-600);
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 768px) {
+  .cards-grid--cols-3,
+  .cards-grid--cols-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .cards-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+// =============================================================================
+// Rich Cards Grid
+// =============================================================================
+
+.rich-cards-grid {
+  display: grid;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+
+  &--cols-auto {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  &--cols-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  &--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  &--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  &--cols-5 {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  &--cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+.rich-card {
+  background: var(--p-surface-0);
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 1.25rem;
+
+  &--clickable {
+    cursor: pointer;
+    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
+
+    &:hover {
+      border-color: var(--p-primary-300);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transform: translateY(-2px);
+    }
+  }
+
+  // Severity variants
+  &--success .rich-card-value {
+    color: var(--p-green-600);
+  }
+
+  &--success .rich-card-icon {
+    color: var(--p-green-500);
+  }
+
+  &--danger .rich-card-value {
+    color: var(--p-red-600);
+  }
+
+  &--danger .rich-card-icon {
+    color: var(--p-red-500);
+  }
+
+  &--warning .rich-card-value {
+    color: var(--p-orange-600);
+  }
+
+  &--warning .rich-card-icon {
+    color: var(--p-orange-500);
+  }
+
+  &--info .rich-card-value {
+    color: var(--p-blue-600);
+  }
+
+  &--info .rich-card-icon {
+    color: var(--p-blue-500);
+  }
+}
+
+.rich-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.rich-card-title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--p-surface-600);
+}
+
+.rich-card-icon {
+  font-size: 1.25rem;
+  color: var(--p-surface-400);
+}
+
+.rich-card-value {
+  font-size: 2rem;
+  font-weight: 700;
+  color: var(--p-surface-900);
+  line-height: 1.2;
+}
+
+.rich-card-subtitle {
+  font-size: 0.8rem;
+  color: var(--p-surface-500);
+  margin-top: 0.25rem;
+}
+
+@media (max-width: 1024px) {
+  .rich-cards-grid--cols-5,
+  .rich-cards-grid--cols-6 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .rich-cards-grid--cols-3,
+  .rich-cards-grid--cols-4,
+  .rich-cards-grid--cols-5,
+  .rich-cards-grid--cols-6 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .rich-cards-grid {
+    grid-template-columns: 1fr;
+  }
+}