@keenmate/pure-admin-core 1.0.0-rc01

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

@@ -0,0 +1,209 @@
+/* ========================================
+   Modal Components
+   Modal windows with overlay, sizes, and themed headers
+   ======================================== */
+@use '../variables' as *;
+
+// ===== MODAL COMPONENTS =====
+
+// Modal wrapper
+.pa-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: $z-index-modal;
+
+  &.pa-modal--show {
+    display: flex;
+  }
+
+  // Top-aligned modifier - positions modal near top instead of center
+  &.pa-modal--top {
+    align-items: flex-start;
+    padding-top: 5vh; // Small offset from top
+  }
+}
+
+// Modal backdrop (the dark overlay)
+.pa-modal__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--pa-modal-overlay-bg);
+  z-index: $z-index-modal-backdrop;
+}
+
+// Modal container (the actual dialog)
+.pa-modal__container {
+  background-color: var(--pa-modal-content-bg);
+  border-radius: $modal-border-radius;
+  box-shadow: $modal-box-shadow;
+  width: 100%;
+  max-width: $modal-md-width;
+  max-height: 90vh;
+  margin: $spacing-base;
+  position: relative;
+  z-index: $z-index-modal;
+  display: flex;
+  flex-direction: column;
+
+  // Size variations
+  &--sm {
+    max-width: $modal-sm-width;
+  }
+
+  &--lg {
+    max-width: $modal-lg-width;
+  }
+
+  &--xl {
+    max-width: $modal-xl-width;
+  }
+
+  &--xxl {
+    max-width: $modal-xxl-width;
+  }
+
+  &--fw {
+    max-width: calc(100vw - ($modal-fw-margin * 2));
+    width: calc(100vw - ($modal-fw-margin * 2));
+    max-height: calc(100vh - ($modal-fw-margin * 2));
+    margin: $modal-fw-margin;
+  }
+}
+
+// Modal header
+.pa-modal__header {
+  padding: $modal-header-padding;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+  border-radius: $modal-border-radius $modal-border-radius 0 0; // Match container's top corners
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pa-modal__title {
+  margin: 0;
+  font-size: $modal-title-font-size;
+  font-weight: $font-weight-semibold;
+  color: var(--pa-text-primary);
+}
+
+// Close button uses standard .pa-btn classes
+// No custom styling needed - handled by button component
+
+// Modal body
+.pa-modal__body {
+  padding: $modal-body-padding;
+  flex: 1;
+  overflow-y: auto;
+  color: var(--pa-text-primary);
+}
+
+// Modal footer
+.pa-modal__footer {
+  padding: $modal-footer-padding;
+  border-top: $border-width-base solid var(--pa-border-color);
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-md;
+  flex-shrink: 0;
+}
+
+// Modal color variations
+.pa-modal--primary .pa-modal__header {
+  background-color: var(--pa-btn-primary-bg);
+  color: var(--pa-modal-content-bg);
+  border-bottom-color: var(--pa-btn-primary-bg);
+
+  .pa-modal__title {
+    color: var(--pa-modal-content-bg);
+  }
+}
+
+.pa-modal--success .pa-modal__header {
+  background-color: var(--pa-btn-success-bg);
+  color: var(--pa-btn-success-text);
+  border-bottom-color: var(--pa-btn-success-bg);
+
+  .pa-modal__title {
+    color: var(--pa-btn-success-text);
+  }
+}
+
+.pa-modal--warning .pa-modal__header {
+  background-color: var(--pa-btn-warning-bg);
+  color: var(--pa-btn-warning-text);
+  border-bottom-color: var(--pa-btn-warning-bg);
+
+  .pa-modal__title {
+    color: var(--pa-btn-warning-text);
+  }
+}
+
+.pa-modal--danger .pa-modal__header {
+  background-color: var(--pa-btn-danger-bg);
+  color: var(--pa-btn-danger-text);
+  border-bottom-color: var(--pa-btn-danger-bg);
+
+  .pa-modal__title {
+    color: var(--pa-btn-danger-text);
+  }
+}
+
+// Modal scrollable content
+.pa-modal__body--scrollable {
+  max-height: $modal-body-scrollable-max-height;
+  overflow-y: auto;
+}
+
+// Modal form styles use the same .pa-form-group as regular forms
+// No additional styling needed - proper grid spacing handles alignment
+
+// Modal backdrop click handling
+.pa-modal[data-backdrop="static"] {
+  // For static modals that don't close on backdrop click
+}
+
+// Responsive modal behavior
+@media (max-width: $mobile-breakpoint) {
+  .pa-modal__container {
+    margin: $modal-mobile-margin;
+    max-height: $modal-mobile-max-height;
+
+    &--lg,
+    &--xl,
+    &--xxl {
+      max-width: calc(100vw - #{$spacing-base});
+    }
+
+    &--fw {
+      --modal-fw-margin: $modal-mobile-margin;
+      max-width: calc(100vw - ($modal-fw-margin * 2));
+      width: calc(100vw - ($modal-fw-margin * 2));
+      max-height: calc(100vh - ($modal-fw-margin * 2));
+      margin: $modal-fw-margin;
+    }
+  }
+
+  .pa-modal__header {
+    padding: $modal-header-padding;
+  }
+
+  .pa-modal__body {
+    padding: $modal-body-padding;
+  }
+
+  .pa-modal__footer {
+    padding: $modal-footer-padding;
+  }
+}
+

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

@@ -0,0 +1,253 @@
+/* ========================================
+   Notification Bell Component
+   Bell button with badge counter and dropdown panel
+   ======================================== */
+@use '../variables' as *;
+
+// ====================
+// Notification Bell Button
+// ====================
+
+.pa-notifications {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.pa-notifications__btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.2rem;
+  height: 3.2rem;
+  background: none;
+  border: none;
+  border-radius: $border-radius;
+  color: var(--pa-text-primary);
+  cursor: pointer;
+  transition: background-color $transition-fast $easing-snappy;
+
+  &:hover {
+    background-color: var(--pa-accent-light);
+  }
+
+  &:focus {
+    outline: $focus-outline-width solid var(--pa-accent);
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+.pa-notifications__icon {
+  font-size: $font-size-lg;
+  line-height: 1;
+}
+
+// Badge counter on bell
+.pa-notifications__badge {
+  position: absolute;
+  top: 0.2rem;
+  right: 0.2rem;
+  min-width: 1.6rem;
+  height: 1.6rem;
+  padding: 0 0.4rem;
+  background-color: $btn-danger-bg;
+  color: $btn-danger-text;
+  font-size: $font-size-2xs;
+  font-weight: $font-weight-semibold;
+  border-radius: 0.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+}
+
+// ====================
+// Notification Panel (Dropdown)
+// ====================
+
+.pa-notifications__panel {
+  position: absolute;
+  top: calc(100% + $spacing-sm);
+  right: 0;
+  width: 35.2rem;
+  max-height: 44.8rem;
+  background-color: var(--pa-card-bg);
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: $border-radius;
+  box-shadow: $shadow-2xl;
+  z-index: $z-index-profile-panel; // Same as profile panel (5000)
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+
+  &.is-open {
+    display: flex;
+  }
+}
+
+// Panel header
+.pa-notifications__header {
+  padding: $spacing-sm $spacing-base;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-base;
+
+  h3 {
+    margin: 0;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-primary);
+  }
+}
+
+.pa-notifications__mark-read {
+  background: none;
+  border: none;
+  padding: 0;
+  color: $accent-color;
+  font-size: $font-size-sm;
+  font-weight: $font-weight-medium;
+  cursor: pointer;
+  transition: color $transition-fast $easing-snappy;
+
+  &:hover {
+    color: $accent-hover;
+  }
+}
+
+// Notification list
+.pa-notifications__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  flex: 1;
+}
+
+// Individual notification item
+.pa-notifications__item {
+  display: flex;
+  gap: $spacing-sm;
+  padding: $spacing-sm $spacing-base;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+  transition: background-color $transition-fast $easing-snappy;
+  cursor: pointer;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    background-color: var(--pa-accent-light);
+  }
+
+  // Unread notification (darker background)
+  &--unread {
+    background-color: rgba($accent-color, 0.05);
+
+    &:hover {
+      background-color: rgba($accent-color, 0.1);
+    }
+  }
+}
+
+// Icon wrapper with color variants
+.pa-notifications__icon-wrapper {
+  width: 3.2rem;
+  height: 3.2rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  font-size: $font-size-base;
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
+
+  &--primary {
+    background-color: rgba($btn-primary-bg, 0.1);
+    color: $btn-primary-bg;
+  }
+
+  &--success {
+    background-color: rgba($btn-success-bg, 0.1);
+    color: $btn-success-bg;
+  }
+
+  &--warning {
+    background-color: rgba($btn-warning-bg, 0.1);
+    color: $btn-warning-bg;
+  }
+
+  &--danger {
+    background-color: rgba($btn-danger-bg, 0.1);
+    color: $btn-danger-bg;
+  }
+
+  &--secondary {
+    background-color: rgba(var(--pa-text-secondary), 0.1);
+    color: var(--pa-text-secondary);
+  }
+}
+
+// Notification content
+.pa-notifications__content {
+  flex: 1;
+  min-width: 0;
+
+  h4 {
+    margin: 0 0 0.2rem 0;
+    font-size: $font-size-xs;
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-primary);
+  }
+
+  p {
+    margin: 0 0 0.2rem 0;
+    font-size: $font-size-xs;
+    color: var(--pa-text-secondary);
+    line-height: 1.3;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+}
+
+.pa-notifications__time {
+  font-size: $font-size-2xs;
+  color: var(--pa-text-secondary);
+  font-weight: $font-weight-normal;
+  opacity: 0.7;
+}
+
+// Panel footer
+.pa-notifications__footer {
+  padding: $spacing-sm $spacing-base;
+  border-top: $border-width-base solid var(--pa-border-color);
+  text-align: center;
+
+  a {
+    color: $accent-color;
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+    text-decoration: none;
+    transition: color $transition-fast $easing-snappy;
+
+    &:hover {
+      color: $accent-hover;
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: $mobile-breakpoint) {
+  .pa-notifications__panel {
+    width: calc(100vw - 3.2rem);
+    max-width: 35.2rem;
+    right: -$spacing-base; // Align to right edge of viewport
+  }
+}

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

@@ -0,0 +1,141 @@
+/* ========================================
+   Pager and Load More Components
+   Pagination controls and load more buttons
+   ======================================== */
+@use '../variables' as *;
+
+// Pager
+.pa-pager {
+  display: flex;
+  margin: $pager-button-margin 0;
+
+  // 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;
+  }
+
+  // Default center alignment
+  justify-content: center;
+
+  // Positioning modifiers
+  &--left {
+    justify-content: flex-start;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--right {
+    justify-content: flex-end;
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    white-space: nowrap;
+  }
+
+  &__controls {
+    display: flex;
+    gap: $pager-controls-gap;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+  }
+
+  &__input {
+    width: $pager-input-width !important;
+    text-align: center;
+  }
+
+  &__text {
+    color: var(--pa-text-secondary);
+    font-size: $font-size-sm;
+  }
+}
+
+// Load More
+.pa-load-more {
+  display: flex;
+  margin: $spacing-base 0;
+
+  // 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;
+  }
+
+  // Default center alignment
+  justify-content: center;
+
+  // Positioning modifiers
+  &--left {
+    justify-content: flex-start;
+  }
+
+  &--center {
+    justify-content: center;
+  }
+
+  &--right {
+    justify-content: flex-end;
+  }
+
+  &__button {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    padding: $btn-padding-v $btn-padding-h;
+    background-color: transparent;
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    color: var(--pa-text-primary);
+    font-size: $font-size-sm;
+    cursor: pointer;
+    transition: all $transition-fast $easing-snappy;
+
+    &:hover {
+      border-color: var(--pa-accent);
+      color: var(--pa-accent);
+      background-color: var(--pa-accent-light);
+    }
+
+    &--loading {
+      pointer-events: none;
+      opacity: 0.7;
+
+      .pa-load-more__spinner {
+        animation: pa-spin 1s linear infinite;
+      }
+    }
+  }
+
+  &__spinner {
+    width: $spinner-size;
+    height: $spinner-size;
+    border: $spinner-border-width solid var(--pa-border-color);
+    border-top: $spinner-border-width solid $accent-color;
+    border-radius: 50%;
+  }
+
+  &__text {
+    color: inherit;
+  }
+
+  &__count {
+    color: var(--pa-text-secondary);
+    font-size: $font-size-xs;
+    margin-left: $spacing-xs;
+  }
+}
+