@keenmate/pure-admin-core 2.3.1 → 2.3.2

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

@@ -1,320 +1,320 @@
-/* ========================================
-   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-header-text);
-  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-color-1);
-  }
-}
-
-.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-color-2), 0.1);
-    color: var(--pa-text-color-2);
-  }
-}
-
-// 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-color-1);
-  }
-
-  p {
-    margin: 0 0 0.2rem 0;
-    font-size: $font-size-xs;
-    color: var(--pa-text-color-2);
-    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-color-2);
-  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
-  }
-}
-
-// ====================
-// Page View Modifier
-// ====================
-// Larger variant for full-page notification list
-
-.pa-notifications__list--page {
-  max-height: none;
-  overflow: visible;
-
-  .pa-notifications__item {
-    padding: $spacing-base $spacing-lg;
-  }
-
-  .pa-notifications__icon-wrapper {
-    width: 4rem;
-    height: 4rem;
-    font-size: $font-size-lg;
-  }
-
-  .pa-notifications__content {
-    h4 {
-      font-size: $font-size-sm;
-      margin-bottom: $spacing-xs;
-    }
-
-    p {
-      font-size: $font-size-sm;
-      -webkit-line-clamp: 3;
-    }
-  }
-
-  .pa-notifications__time {
-    font-size: $font-size-xs;
-  }
-}
-
-// Action buttons (for page view)
-.pa-notifications__actions {
-  display: flex;
-  gap: $spacing-xs;
-  flex-shrink: 0;
-  opacity: 0;
-  transition: opacity $transition-fast $easing-snappy;
-}
-
-.pa-notifications__item:hover .pa-notifications__actions {
-  opacity: 1;
-}
-
-// Mobile: always show actions
-@media (max-width: $mobile-breakpoint) {
-  .pa-notifications__list--page {
-    .pa-notifications__item {
-      flex-wrap: wrap;
-    }
-
-    .pa-notifications__actions {
-      opacity: 1;
-      width: 100%;
-      justify-content: flex-end;
-      margin-top: $spacing-sm;
-      padding-top: $spacing-sm;
-      border-top: $border-width-base solid var(--pa-border-color);
-    }
-  }
-}
+/* ========================================
+   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: var(--pa-border-radius);
+  color: var(--pa-header-text);
+  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: var(--pa-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-color-1);
+  }
+}
+
+.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-color-2), 0.1);
+    color: var(--pa-text-color-2);
+  }
+}
+
+// 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-color-1);
+  }
+
+  p {
+    margin: 0 0 0.2rem 0;
+    font-size: $font-size-xs;
+    color: var(--pa-text-color-2);
+    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-color-2);
+  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
+  }
+}
+
+// ====================
+// Page View Modifier
+// ====================
+// Larger variant for full-page notification list
+
+.pa-notifications__list--page {
+  max-height: none;
+  overflow: visible;
+
+  .pa-notifications__item {
+    padding: $spacing-base $spacing-lg;
+  }
+
+  .pa-notifications__icon-wrapper {
+    width: 4rem;
+    height: 4rem;
+    font-size: $font-size-lg;
+  }
+
+  .pa-notifications__content {
+    h4 {
+      font-size: $font-size-sm;
+      margin-bottom: $spacing-xs;
+    }
+
+    p {
+      font-size: $font-size-sm;
+      -webkit-line-clamp: 3;
+    }
+  }
+
+  .pa-notifications__time {
+    font-size: $font-size-xs;
+  }
+}
+
+// Action buttons (for page view)
+.pa-notifications__actions {
+  display: flex;
+  gap: $spacing-xs;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity $transition-fast $easing-snappy;
+}
+
+.pa-notifications__item:hover .pa-notifications__actions {
+  opacity: 1;
+}
+
+// Mobile: always show actions
+@media (max-width: $mobile-breakpoint) {
+  .pa-notifications__list--page {
+    .pa-notifications__item {
+      flex-wrap: wrap;
+    }
+
+    .pa-notifications__actions {
+      opacity: 1;
+      width: 100%;
+      justify-content: flex-end;
+      margin-top: $spacing-sm;
+      padding-top: $spacing-sm;
+      border-top: $border-width-base solid var(--pa-border-color);
+    }
+  }
+}