@keenmate/pure-admin-core 2.3.1 → 2.3.3

package/src/scss/core-components/_alerts.scss

@@ -1,227 +1,227 @@
-/* ========================================
-   Alert Components
-   Alerts with variants, sizes, dismissible functionality
-   ======================================== */
-@use '../variables' as *;
-
-// Alerts
-.pa-alert {
-  position: relative;
-  padding: $card-footer-padding-v $card-footer-padding-h;
-  margin-bottom: $spacing-base;
-  border: $border-width-base solid transparent;
-  border-radius: $border-radius;
-  font-size: $font-size-sm;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-
-  // Remove margins when first/last child in card body
-  .pa-card__body &:first-child {
-    margin-top: 0;
-  }
-  .pa-card__body &:last-child {
-    margin-bottom: 0;
-  }
-  gap: $spacing-sm;
-
-  // Basic alert variants - using theme colors with subtle backgrounds
-  &--primary {
-    color: var(--pa-accent);
-    background-color: rgba($accent-color, $opacity-subtle);
-    border-color: rgba($accent-color, $opacity-border);
-  }
-
-  &--secondary {
-    color: var(--pa-text-color-2);
-    background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
-    border-color: var(--pa-border-color);
-  }
-
-  &--success {
-    color: var(--pa-alert-success-text);
-    background-color: var(--pa-alert-success-bg);
-    border-color: var(--pa-alert-success-border);
-  }
-
-  &--danger {
-    color: var(--pa-alert-danger-text);
-    background-color: var(--pa-alert-danger-bg);
-    border-color: var(--pa-alert-danger-border);
-    text-transform: $alert-danger-text-transform;
-  }
-
-  &--warning {
-    color: var(--pa-alert-warning-text);
-    background-color: var(--pa-alert-warning-bg);
-    border-color: var(--pa-alert-warning-border);
-  }
-
-  &--info {
-    color: var(--pa-alert-info-text);
-    background-color: var(--pa-alert-info-bg);
-    border-color: var(--pa-alert-info-border);
-  }
-
-  &--light {
-    color: var(--pa-text-color-1);
-    background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
-    border-color: var(--pa-border-color);
-  }
-
-  &--dark {
-    color: var(--pa-text-color-1);
-    background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
-    border-color: color-mix(in srgb, var(--pa-text-color-1) 10%, transparent);
-  }
-
-  // Outline variants
-  &--outline-primary {
-    color: var(--pa-accent);
-    border-color: var(--pa-accent);
-    background-color: transparent;
-  }
-
-  &--outline-success {
-    color: var(--pa-success-bg);
-    border-color: var(--pa-success-bg);
-    background-color: transparent;
-  }
-
-  &--outline-danger {
-    color: var(--pa-danger-bg);
-    border-color: var(--pa-danger-bg);
-    background-color: transparent;
-  }
-
-  &--outline-warning {
-    color: var(--pa-warning-bg);
-    border-color: var(--pa-warning-bg);
-    background-color: transparent;
-  }
-
-  &--outline-info {
-    color: var(--pa-info-bg);
-    border-color: var(--pa-info-bg);
-    background-color: transparent;
-  }
-
-  // Theme color slot variants (color-1 through color-9)
-  @for $i from 1 through 9 {
-    &--color-#{$i} {
-      color: var(--pa-color-#{$i}-text);
-      background-color: var(--pa-color-#{$i});
-      border-color: var(--pa-color-#{$i});
-    }
-
-    &--outline-color-#{$i} {
-      color: var(--pa-color-#{$i});
-      border-color: var(--pa-color-#{$i});
-      background-color: transparent;
-    }
-  }
-
-  // Alert sizes (size modifiers only change font-size, padding controlled by theme)
-  &--sm {
-    padding: $alert-padding-v $alert-padding-h;
-    font-size: $font-size-sm;
-  }
-
-  &--lg {
-    padding: $alert-padding-v $alert-padding-h;
-    font-size: $font-size-base;
-  }
-
-  // Dismissible alerts
-  &--dismissible {
-    padding-inline-end: $alert-dismissible-padding-right; // RTL: flips to padding-left
-  }
-
-  // Alert components
-  &__icon {
-    flex-shrink: 0;
-    font-size: $font-size-base;
-    line-height: 1;
-  }
-
-  &__content {
-    flex: 1;
-  }
-
-  &__heading {
-    margin: 0 0 $spacing-sm 0;
-    color: inherit;
-    font-size: $font-size-lg;
-    font-weight: $font-weight-semibold;
-  }
-
-  &__list {
-    margin: $spacing-sm 0;
-    padding-inline-start: $alert-list-padding-left; // RTL: flips to padding-right
-  }
-
-  &__actions {
-    margin-top: $alert-list-item-margin-top;
-    display: flex;
-    gap: $spacing-sm;
-  }
-
-  &__close {
-    position: absolute;
-    top: 0;
-    inset-inline-end: 0; // RTL: flips to left
-    z-index: $focus-outline-width;
-    padding: $card-footer-padding-v $card-footer-padding-h;
-    background: none;
-    border: none;
-    font-size: $font-size-xl;
-    line-height: 1;
-    color: inherit;
-    cursor: pointer;
-    opacity: $alert-close-opacity;
-    transition: opacity $transition-fast $easing-snappy;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:focus {
-      outline: none;
-      opacity: 1;
-    }
-  }
-
-  // Remove margin from last child
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  // Links styling
-  a {
-    color: inherit;
-    text-decoration: underline;
-    font-weight: $font-weight-semibold;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-
-  // Headings inside alerts
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    color: inherit;
-  }
-
-  // Horizontal rule
-  hr {
-    margin: $spacing-sm 0;
-    border: 0;
-    border-top: $border-width-base solid rgba(0, 0, 0, $opacity-light);
-  }
-}
-
+/* ========================================
+   Alert Components
+   Alerts with variants, sizes, dismissible functionality
+   ======================================== */
+@use '../variables' as *;
+
+// Alerts
+.pa-alert {
+  position: relative;
+  padding: $card-footer-padding-v $card-footer-padding-h;
+  margin-bottom: $spacing-base;
+  border: $border-width-base solid transparent;
+  border-radius: var(--pa-border-radius);
+  font-size: $font-size-sm;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  // Remove margins when first/last child in card body
+  .pa-card__body &:first-child {
+    margin-top: 0;
+  }
+  .pa-card__body &:last-child {
+    margin-bottom: 0;
+  }
+  gap: $spacing-sm;
+
+  // Basic alert variants - using theme colors with subtle backgrounds
+  &--primary {
+    color: var(--pa-accent);
+    background-color: rgba($accent-color, $opacity-subtle);
+    border-color: rgba($accent-color, $opacity-border);
+  }
+
+  &--secondary {
+    color: var(--pa-text-color-2);
+    background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
+    border-color: var(--pa-border-color);
+  }
+
+  &--success {
+    color: var(--pa-alert-success-text);
+    background-color: var(--pa-alert-success-bg);
+    border-color: var(--pa-alert-success-border);
+  }
+
+  &--danger {
+    color: var(--pa-alert-danger-text);
+    background-color: var(--pa-alert-danger-bg);
+    border-color: var(--pa-alert-danger-border);
+    text-transform: $alert-danger-text-transform;
+  }
+
+  &--warning {
+    color: var(--pa-alert-warning-text);
+    background-color: var(--pa-alert-warning-bg);
+    border-color: var(--pa-alert-warning-border);
+  }
+
+  &--info {
+    color: var(--pa-alert-info-text);
+    background-color: var(--pa-alert-info-bg);
+    border-color: var(--pa-alert-info-border);
+  }
+
+  &--light {
+    color: var(--pa-text-color-1);
+    background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
+    border-color: var(--pa-border-color);
+  }
+
+  &--dark {
+    color: var(--pa-text-color-1);
+    background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
+    border-color: color-mix(in srgb, var(--pa-text-color-1) 10%, transparent);
+  }
+
+  // Outline variants
+  &--outline-primary {
+    color: var(--pa-accent);
+    border-color: var(--pa-accent);
+    background-color: transparent;
+  }
+
+  &--outline-success {
+    color: var(--pa-success-bg);
+    border-color: var(--pa-success-bg);
+    background-color: transparent;
+  }
+
+  &--outline-danger {
+    color: var(--pa-danger-bg);
+    border-color: var(--pa-danger-bg);
+    background-color: transparent;
+  }
+
+  &--outline-warning {
+    color: var(--pa-warning-bg);
+    border-color: var(--pa-warning-bg);
+    background-color: transparent;
+  }
+
+  &--outline-info {
+    color: var(--pa-info-bg);
+    border-color: var(--pa-info-bg);
+    background-color: transparent;
+  }
+
+  // Theme color slot variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      color: var(--pa-color-#{$i}-text);
+      background-color: var(--pa-color-#{$i});
+      border-color: var(--pa-color-#{$i});
+    }
+
+    &--outline-color-#{$i} {
+      color: var(--pa-color-#{$i});
+      border-color: var(--pa-color-#{$i});
+      background-color: transparent;
+    }
+  }
+
+  // Alert sizes (size modifiers only change font-size, padding controlled by theme)
+  &--sm {
+    padding: $alert-padding-v $alert-padding-h;
+    font-size: $font-size-sm;
+  }
+
+  &--lg {
+    padding: $alert-padding-v $alert-padding-h;
+    font-size: $font-size-base;
+  }
+
+  // Dismissible alerts
+  &--dismissible {
+    padding-inline-end: $alert-dismissible-padding-right; // RTL: flips to padding-left
+  }
+
+  // Alert components
+  &__icon {
+    flex-shrink: 0;
+    font-size: $font-size-base;
+    line-height: 1;
+  }
+
+  &__content {
+    flex: 1;
+  }
+
+  &__heading {
+    margin: 0 0 $spacing-sm 0;
+    color: inherit;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__list {
+    margin: $spacing-sm 0;
+    padding-inline-start: $alert-list-padding-left; // RTL: flips to padding-right
+  }
+
+  &__actions {
+    margin-top: $alert-list-item-margin-top;
+    display: flex;
+    gap: $spacing-sm;
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    inset-inline-end: 0; // RTL: flips to left
+    z-index: $focus-outline-width;
+    padding: $card-footer-padding-v $card-footer-padding-h;
+    background: none;
+    border: none;
+    font-size: $font-size-xl;
+    line-height: 1;
+    color: inherit;
+    cursor: pointer;
+    opacity: $alert-close-opacity;
+    transition: opacity $transition-fast $easing-snappy;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus {
+      outline: none;
+      opacity: 1;
+    }
+  }
+
+  // Remove margin from last child
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // Links styling
+  a {
+    color: inherit;
+    text-decoration: underline;
+    font-weight: $font-weight-semibold;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  // Headings inside alerts
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: inherit;
+  }
+
+  // Horizontal rule
+  hr {
+    margin: $spacing-sm 0;
+    border: 0;
+    border-top: $border-width-base solid rgba(0, 0, 0, $opacity-light);
+  }
+}
+

package/src/scss/core-components/_badges.scss

@@ -1,16 +1,16 @@
-/* ========================================
-   Badge Components
-   Standard badges, composite badges, and label components
-   ======================================== */
-
-// ============================================================================
-// BACKWARD COMPATIBILITY AGGREGATOR
-// This file re-exports all badge components from the modular badges/ directory.
-// For new code, prefer importing from badges/ directly:
-//   @use 'badges' as *;
-// or specific modules:
-//   @use 'badges/badge-base';
-//   @use 'badges/composite-badge';
-// ============================================================================
-
-@forward 'badges/index';
+/* ========================================
+   Badge Components
+   Standard badges, composite badges, and label components
+   ======================================== */
+
+// ============================================================================
+// BACKWARD COMPATIBILITY AGGREGATOR
+// This file re-exports all badge components from the modular badges/ directory.
+// For new code, prefer importing from badges/ directly:
+//   @use 'badges' as *;
+// or specific modules:
+//   @use 'badges/badge-base';
+//   @use 'badges/composite-badge';
+// ============================================================================
+
+@forward 'badges/index';