@keenmate/pure-admin-core 2.3.0 → 2.3.2

package/src/scss/core-components/badges/_composite-badge.scss

@@ -1,70 +1,70 @@
-/* ========================================
-   Composite Badge
-   Multi-part badge with [icon][label][button] structure
-   ======================================== */
-@use '../../variables' as *;
-@use "sass:color";
-
-// Composite Badge - [icon][label][button]
-.pa-composite-badge {
-  display: inline-flex;
-  align-items: center;
-  height: $composite-badge-height;
-  font-size: $font-size-xs;
-  font-weight: $font-weight-medium;
-  border-radius: $border-radius;
-  overflow: hidden;
-
-  &__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $composite-badge-icon-width;
-    height: 100%;
-    flex-shrink: 0;
-    background-color: var(--pa-composite-badge-icon-bg);
-    color: var(--pa-btn-primary-text);
-    font-size: $font-size-sm;
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 $composite-badge-label-padding;
-    background-color: var(--pa-composite-badge-label-bg);
-    color: var(--pa-composite-badge-label-text);
-    cursor: pointer;
-    transition: background-color $transition-normal ease;
-    user-select: none;
-    min-width: $stat-icon-size;
-
-    &:hover {
-      background-color: var(--pa-composite-badge-label-hover-bg);
-    }
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $composite-badge-button-width;
-    height: 100%;
-    flex-shrink: 0;
-    background-color: var(--pa-danger-bg);
-    color: var(--pa-btn-danger-text);
-    border: none;
-    cursor: pointer;
-    transition: background-color $transition-normal ease;
-    font-size: $font-size-xs;
-
-    &:hover {
-      background-color: var(--pa-danger-bg-hover);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 $focus-outline-width rgba($danger-bg, $btn-focus-ring-opacity);
-    }
-  }
-}
+/* ========================================
+   Composite Badge
+   Multi-part badge with [icon][label][button] structure
+   ======================================== */
+@use '../../variables' as *;
+@use "sass:color";
+
+// Composite Badge - [icon][label][button]
+.pa-composite-badge {
+  display: inline-flex;
+  align-items: center;
+  height: $composite-badge-height;
+  font-size: $font-size-xs;
+  font-weight: $font-weight-medium;
+  border-radius: var(--pa-border-radius);
+  overflow: hidden;
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $composite-badge-icon-width;
+    height: 100%;
+    flex-shrink: 0;
+    background-color: var(--pa-composite-badge-icon-bg);
+    color: var(--pa-btn-primary-text);
+    font-size: $font-size-sm;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 $composite-badge-label-padding;
+    background-color: var(--pa-composite-badge-label-bg);
+    color: var(--pa-composite-badge-label-text);
+    cursor: pointer;
+    transition: background-color $transition-normal ease;
+    user-select: none;
+    min-width: $stat-icon-size;
+
+    &:hover {
+      background-color: var(--pa-composite-badge-label-hover-bg);
+    }
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $composite-badge-button-width;
+    height: 100%;
+    flex-shrink: 0;
+    background-color: var(--pa-danger-bg);
+    color: var(--pa-btn-danger-text);
+    border: none;
+    cursor: pointer;
+    transition: background-color $transition-normal ease;
+    font-size: $font-size-xs;
+
+    &:hover {
+      background-color: var(--pa-danger-bg-hover);
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 $focus-outline-width rgba($danger-bg, $btn-focus-ring-opacity);
+    }
+  }
+}

package/src/scss/core-components/badges/_index.scss

@@ -1,10 +1,10 @@
-/* ========================================
-   Badges Index
-   Central import point for all badge component modules
-   ======================================== */
-
-@forward 'badge-base';
-@forward 'composite-badge';
-@forward 'composite-badge-variants';
-@forward 'badge-group';
-@forward 'labels';
+/* ========================================
+   Badges Index
+   Central import point for all badge component modules
+   ======================================== */
+
+@forward 'badge-base';
+@forward 'composite-badge';
+@forward 'composite-badge-variants';
+@forward 'badge-group';
+@forward 'labels';

package/src/scss/core-components/badges/_labels.scss

@@ -1,155 +1,155 @@
-/* ========================================
-   Label Components
-   Tag-like labels with colors and sizes
-   ======================================== */
-@use '../../variables' as *;
-
-// Label Components
-.pa-label {
-  display: inline-flex;
-  align-items: center;
-  gap: $spacing-xs;
-  padding: 0.4rem 0.8rem;         // Match badge default
-  background-color: var(--pa-accent-light);
-  color: var(--pa-text-color-1);
-  font-size: $font-size-xs;       // 1.2rem (12px) - match badge default
-  font-weight: $font-weight-medium;
-  line-height: $line-height-tight;
-  text-decoration: none;
-  border-radius: $border-radius;
-  border: $border-width-base solid var(--pa-border-color);
-  transition: all $transition-fast $easing-snappy;
-
-  &:hover {
-    background-color: var(--pa-accent-hover);
-    text-decoration: none;
-  }
-
-  // Size variations (matching badge scale)
-  &--xs {
-    padding: 0.2rem 0.4rem;
-    font-size: $font-size-2xs;  // 1rem (10px)
-  }
-
-  &--sm {
-    padding: 0.25rem 0.5rem;
-    font-size: $font-size-xs;   // 1.2rem (12px)
-  }
-
-  &--lg {
-    padding: 0.5rem 1rem;
-    font-size: $font-size-sm;   // 1.4rem (14px)
-  }
-
-  &--xl {
-    padding: 0.6rem 1.2rem;
-    font-size: $font-size-base; // 1.6rem (16px)
-  }
-
-  // Style variations
-  &--outline {
-    background-color: transparent;
-    border: $border-width-base solid var(--pa-border-color);
-
-    &:hover {
-      background-color: var(--pa-accent-light);
-    }
-  }
-
-  // Color variations
-  &--primary {
-    background-color: var(--pa-accent-light);
-    color: var(--pa-accent);
-    border-color: var(--pa-accent);
-
-    &.pa-label--outline {
-      background-color: transparent;
-      color: var(--pa-accent);
-      border-color: var(--pa-accent);
-
-      &:hover {
-        background-color: var(--pa-accent-light);
-      }
-    }
-  }
-
-  &--secondary {
-    background-color: rgba($secondary-bg, $opacity-light);
-    color: $secondary-bg;
-    border-color: $secondary-bg;
-
-    &.pa-label--outline {
-      background-color: transparent;
-      color: $secondary-bg;
-      border-color: $secondary-bg;
-
-      &:hover {
-        background-color: rgba($secondary-bg, $opacity-light);
-      }
-    }
-  }
-
-  &--success {
-    background-color: var(--pa-success-bg-light);
-    color: var(--pa-success-bg);
-    border-color: var(--pa-success-bg);
-
-    &.pa-label--outline {
-      background-color: transparent;
-      color: var(--pa-success-bg);
-      border-color: var(--pa-success-bg);
-
-      &:hover {
-        background-color: var(--pa-success-bg-light);
-      }
-    }
-  }
-
-  &--warning {
-    background-color: var(--pa-warning-bg-light);
-    color: var(--pa-warning-bg);
-    border-color: var(--pa-warning-bg);
-
-    &.pa-label--outline {
-      background-color: transparent;
-      color: var(--pa-warning-bg);
-      border-color: var(--pa-warning-bg);
-
-      &:hover {
-        background-color: var(--pa-warning-bg-light);
-      }
-    }
-  }
-
-  &--danger {
-    background-color: var(--pa-danger-bg-light);
-    color: var(--pa-danger-bg);
-    border-color: var(--pa-danger-bg);
-
-    &.pa-label--outline {
-      background-color: transparent;
-      color: var(--pa-danger-bg);
-      border-color: var(--pa-danger-bg);
-
-      &:hover {
-        background-color: var(--pa-danger-bg-light);
-      }
-    }
-  }
-
-  &--info {
-    background-color: var(--pa-info-bg-light);
-    color: var(--pa-info-bg);
-    border-color: var(--pa-info-bg);
-
-    &.pa-label--outline {
-      background-color: transparent;
-      color: var(--pa-info-bg);
-      border-color: var(--pa-info-bg);
-
-      &:hover {
-        background-color: var(--pa-info-bg-light);
-      }
-    }
-  }
-}
+/* ========================================
+   Label Components
+   Tag-like labels with colors and sizes
+   ======================================== */
+@use '../../variables' as *;
+
+// Label Components
+.pa-label {
+  display: inline-flex;
+  align-items: center;
+  gap: $spacing-xs;
+  padding: 0.4rem 0.8rem;         // Match badge default
+  background-color: var(--pa-accent-light);
+  color: var(--pa-text-color-1);
+  font-size: $font-size-xs;       // 1.2rem (12px) - match badge default
+  font-weight: $font-weight-medium;
+  line-height: $line-height-tight;
+  text-decoration: none;
+  border-radius: var(--pa-border-radius);
+  border: $border-width-base solid var(--pa-border-color);
+  transition: all $transition-fast $easing-snappy;
+
+  &:hover {
+    background-color: var(--pa-accent-hover);
+    text-decoration: none;
+  }
+
+  // Size variations (matching badge scale)
+  &--xs {
+    padding: 0.2rem 0.4rem;
+    font-size: $font-size-2xs;  // 1rem (10px)
+  }
+
+  &--sm {
+    padding: 0.25rem 0.5rem;
+    font-size: $font-size-xs;   // 1.2rem (12px)
+  }
+
+  &--lg {
+    padding: 0.5rem 1rem;
+    font-size: $font-size-sm;   // 1.4rem (14px)
+  }
+
+  &--xl {
+    padding: 0.6rem 1.2rem;
+    font-size: $font-size-base; // 1.6rem (16px)
+  }
+
+  // Style variations
+  &--outline {
+    background-color: transparent;
+    border: $border-width-base solid var(--pa-border-color);
+
+    &:hover {
+      background-color: var(--pa-accent-light);
+    }
+  }
+
+  // Color variations
+  &--primary {
+    background-color: var(--pa-accent-light);
+    color: var(--pa-accent);
+    border-color: var(--pa-accent);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-accent);
+      border-color: var(--pa-accent);
+
+      &:hover {
+        background-color: var(--pa-accent-light);
+      }
+    }
+  }
+
+  &--secondary {
+    background-color: rgba($secondary-bg, $opacity-light);
+    color: $secondary-bg;
+    border-color: $secondary-bg;
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: $secondary-bg;
+      border-color: $secondary-bg;
+
+      &:hover {
+        background-color: rgba($secondary-bg, $opacity-light);
+      }
+    }
+  }
+
+  &--success {
+    background-color: var(--pa-success-bg-light);
+    color: var(--pa-success-bg);
+    border-color: var(--pa-success-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-success-bg);
+      border-color: var(--pa-success-bg);
+
+      &:hover {
+        background-color: var(--pa-success-bg-light);
+      }
+    }
+  }
+
+  &--warning {
+    background-color: var(--pa-warning-bg-light);
+    color: var(--pa-warning-bg);
+    border-color: var(--pa-warning-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-warning-bg);
+      border-color: var(--pa-warning-bg);
+
+      &:hover {
+        background-color: var(--pa-warning-bg-light);
+      }
+    }
+  }
+
+  &--danger {
+    background-color: var(--pa-danger-bg-light);
+    color: var(--pa-danger-bg);
+    border-color: var(--pa-danger-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-danger-bg);
+      border-color: var(--pa-danger-bg);
+
+      &:hover {
+        background-color: var(--pa-danger-bg-light);
+      }
+    }
+  }
+
+  &--info {
+    background-color: var(--pa-info-bg-light);
+    color: var(--pa-info-bg);
+    border-color: var(--pa-info-bg);
+
+    &.pa-label--outline {
+      background-color: transparent;
+      color: var(--pa-info-bg);
+      border-color: var(--pa-info-bg);
+
+      &:hover {
+        background-color: var(--pa-info-bg-light);
+      }
+    }
+  }
+}