@keenmate/pure-admin-core 1.0.0-rc01

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

@@ -0,0 +1,170 @@
+/* ========================================
+   Popconfirm Component
+   Small confirmation dialog anchored to trigger button
+   Alternative to modal for simple yes/no confirmations
+   ======================================== */
+@use '../variables' as *;
+
+// ====================
+// Popconfirm Container
+// ====================
+
+.pa-popconfirm {
+  position: absolute;
+  z-index: $z-index-tooltip; // 9000 - Above everything else
+  display: none;
+  min-width: 25.6rem;
+  max-width: 32rem;
+
+  &.is-open {
+    display: block;
+  }
+}
+
+// Arrow pointing to trigger button
+.pa-popconfirm__arrow {
+  position: absolute;
+  width: 1.2rem;
+  height: 1.2rem;
+  background-color: var(--pa-card-bg);
+  transform: rotate(45deg);
+  border: $border-width-base solid var(--pa-border-color);
+  z-index: -1;
+}
+
+// Content container
+.pa-popconfirm__content {
+  background-color: var(--pa-card-bg);
+  border: $border-width-base solid var(--pa-border-color);
+  border-radius: $border-radius;
+  box-shadow: $shadow-2xl;
+  overflow: hidden;
+}
+
+// Message area
+.pa-popconfirm__message {
+  padding: $spacing-base;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+
+  p {
+    margin: 0;
+    font-size: $font-size-sm;
+    color: var(--pa-text-primary);
+    line-height: $line-height-base;
+  }
+}
+
+// Icon for message (optional)
+.pa-popconfirm__icon {
+  display: flex;
+  align-items: flex-start;
+  gap: $spacing-sm;
+
+  &::before {
+    content: '⚠️';
+    font-size: $font-size-lg;
+    flex-shrink: 0;
+  }
+
+  &--danger::before {
+    content: '🗑️';
+  }
+
+  &--warning::before {
+    content: '⚠️';
+  }
+
+  &--info::before {
+    content: 'ℹ️';
+  }
+
+  p {
+    flex: 1;
+  }
+}
+
+// Action buttons
+.pa-popconfirm__actions {
+  padding: $spacing-sm $spacing-base;
+  display: flex;
+  gap: $spacing-sm;
+  justify-content: flex-end;
+  background-color: rgba($border-color, 0.3);
+
+  .pa-btn {
+    font-size: $font-size-xs;
+    padding: $spacing-xs $spacing-sm;
+  }
+}
+
+// ====================
+// Position Variants
+// ====================
+
+// Bottom (default) - arrow on top
+.pa-popconfirm--bottom {
+  margin-top: $spacing-sm;
+
+  .pa-popconfirm__arrow {
+    top: -0.64rem;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-right: none;
+    border-bottom: none;
+  }
+}
+
+// Top - arrow on bottom
+.pa-popconfirm--top {
+  margin-bottom: $spacing-sm;
+
+  .pa-popconfirm__arrow {
+    bottom: -0.64rem;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
+    border-left: none;
+    border-top: none;
+  }
+}
+
+// Right - arrow on left
+.pa-popconfirm--right {
+  margin-left: $spacing-sm;
+
+  .pa-popconfirm__arrow {
+    left: -0.64rem;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-top: none;
+    border-right: none;
+  }
+}
+
+// Left - arrow on right
+.pa-popconfirm--left {
+  margin-right: $spacing-sm;
+
+  .pa-popconfirm__arrow {
+    right: -0.64rem;
+    top: 50%;
+    transform: translateY(-50%) rotate(45deg);
+    border-bottom: none;
+    border-left: none;
+  }
+}
+
+// ====================
+// Compact Variant
+// ====================
+
+.pa-popconfirm--compact {
+  min-width: 19.2rem;
+
+  .pa-popconfirm__message {
+    padding: $spacing-sm;
+  }
+
+  .pa-popconfirm__actions {
+    padding: $spacing-xs $spacing-sm;
+  }
+}

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

@@ -0,0 +1,281 @@
+/* ========================================
+   Profile Panel Components
+   Profile panel and header button
+   ======================================== */
+@use '../variables' as *;
+
+// ====================
+// Profile Panel & Header Button
+// ====================
+
+// Header profile button
+.pa-header__profile-btn {
+  display: flex;
+  align-items: center;
+  background: none;
+  border: none;
+  padding: $spacing-xs $spacing-sm; // Match nav item padding
+  border-radius: $border-radius;
+  color: var(--pa-text-primary);
+  cursor: pointer;
+  font-size: $font-size-sm; // Apply to whole button (text and icon)
+  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-header__profile-name {
+  font-weight: $font-weight-medium;
+  color: $header-profile-name-color;
+}
+
+// Profile panel
+.pa-profile-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  z-index: $z-index-profile-panel;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity $transition-medium $easing-snappy,
+              visibility $transition-medium $easing-snappy;
+
+  &--open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+
+    .pa-profile-panel__content {
+      transform: translateX(0);
+    }
+  }
+
+  &__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--pa-profile-overlay-bg);
+    cursor: pointer;
+  }
+
+  &__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: $profile-panel-width;
+    max-width: $profile-panel-max-width;
+    height: 100vh;
+    background-color: var(--pa-card-bg);
+    box-shadow: $shadow-profile-panel;
+    transform: translateX(100%);
+    transition: transform $transition-medium $easing-snappy;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  &__header {
+    padding: $spacing-lg;
+    background-color: var(--pa-header-bg);
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    display: flex;
+    align-items: flex-start;
+    gap: $spacing-base;
+    position: relative;
+  }
+
+  &__avatar {
+    width: $profile-avatar-size;
+    height: $profile-avatar-size;
+    background-color: var(--pa-accent-light);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__avatar-icon {
+    font-size: $font-size-4xl;
+    color: $accent-color;
+  }
+
+  &__info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    margin: 0 0 $spacing-xs 0;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-primary);
+  }
+
+  &__email {
+    margin: 0 0 $spacing-sm 0;
+    font-size: $font-size-sm;
+    color: var(--pa-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__role {
+    display: inline-block;
+    padding: $btn-padding-v $btn-padding-h;
+    background-color: var(--pa-accent-light);
+    color: var(--pa-accent);
+    font-size: $font-size-xs;
+    font-weight: $font-weight-medium;
+    border-radius: $border-radius;
+    text-transform: uppercase;
+    letter-spacing: $profile-role-letter-spacing;
+  }
+
+  &__close {
+    position: absolute;
+    top: $spacing-base;
+    right: $spacing-base;
+    width: $profile-close-size;
+    height: $profile-close-size;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--pa-text-secondary);
+    border-radius: $border-radius;
+    transition: background-color $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy;
+
+    &:hover {
+      background-color: var(--pa-accent-light);
+      color: var(--pa-accent);
+    }
+
+    &:focus {
+      outline: $focus-outline-width solid var(--pa-accent);
+      outline-offset: $focus-outline-offset;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    padding: $spacing-lg;
+    display: flex;
+    flex-direction: column;
+    gap: $profile-section-gap;
+    overflow-y: auto;
+  }
+
+  &__nav {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: $spacing-sm;
+    }
+  }
+
+  &__nav-item {
+    display: flex;
+    align-items: center;
+    gap: $spacing-md;
+    padding: $card-footer-padding-v $card-footer-padding-h;
+    color: var(--pa-text-primary);
+    text-decoration: none;
+    border-radius: $border-radius;
+    transition: background-color $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy;
+    font-weight: $font-weight-medium;
+
+    &:hover {
+      background-color: var(--pa-accent-light);
+      color: var(--pa-accent);
+    }
+
+    &:focus {
+      outline: $focus-outline-width solid var(--pa-accent);
+      outline-offset: $focus-outline-offset;
+    }
+  }
+
+  &__nav-icon {
+    font-size: $font-size-lg;
+    width: $profile-nav-icon-width;
+    text-align: center;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+    margin-top: auto;
+  }
+}
+
+// Responsive adjustments
+@media (max-width: $mobile-breakpoint) {
+  .pa-profile-panel__content {
+    width: 85vw;
+    max-width: $profile-panel-mobile-max-width;
+  }
+
+  .pa-header__profile-name {
+    display: none;
+  }
+}
+
+// Global scrollbar styling - applies to all content
+/* Webkit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  width: $scrollbar-width;
+  height: $scrollbar-width;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--pa-primary-bg);
+  border-radius: $border-radius;
+}
+
+*::-webkit-scrollbar-thumb {
+  background: $border-color;
+  border-radius: $border-radius;
+  border: $border-width-base solid var(--pa-primary-bg);
+
+  &:hover {
+    background: $accent-color;
+    border-color: $accent-hover;
+  }
+
+  &:active {
+    background: $accent-hover;
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: var(--pa-primary-bg);
+}
+
+/* Firefox */
+* {
+  scrollbar-width: auto;
+  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+}
+

package/src/scss/core-components/_settings-panel.scss

@@ -0,0 +1,128 @@
+/* ========================================
+   Settings Panel Component
+   Floating panel for global settings management
+   ======================================== */
+@use '../variables' as *;
+
+.pa-settings-panel {
+  position: fixed;
+  right: -$profile-panel-width-fixed; // Panel hidden by default
+  top: $settings-panel-top; // Position higher up for larger panel
+  z-index: 10000;
+  width: $profile-panel-width-fixed;
+  transition: right $settings-panel-transition-duration $settings-panel-transition-easing;
+
+  &__toggle {
+    position: absolute;
+    right: $profile-panel-width-fixed; // Position button at the right edge
+    top: 0;
+    width: $profile-panel-toggle-size;
+    height: $profile-panel-toggle-size;
+    background: $accent-color;
+    color: white;
+    border: none;
+    border-radius: $border-radius 0 0 $border-radius;
+    cursor: pointer;
+    font-size: $font-size-xl;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all $settings-panel-transition-duration $settings-panel-transition-easing;
+    box-shadow: $shadow-sidebar;
+
+    &:hover {
+      background: $accent-hover;
+      width: $profile-panel-toggle-size-open;
+      right: calc($profile-panel-width-fixed + $settings-panel-hover-offset);
+    }
+  }
+
+  &__content {
+    background: var(--pa-content-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-right: none;
+    border-radius: $border-radius 0 0 $border-radius;
+    box-shadow: $shadow-sidebar-open;
+    padding: $spacing-lg;
+    width: 100%;
+    height: $settings-panel-height; // Larger panel height for more settings
+    min-height: $settings-panel-min-height;
+    max-height: calc(100vh - $settings-panel-vertical-clearance); // Leave space from top/bottom
+    overflow-y: auto;
+  }
+
+  &__title {
+    margin: 0 0 $spacing-lg 0;
+    padding-bottom: $card-footer-padding-v;
+    border-bottom: $border-width-medium solid var(--pa-border-color);
+    color: var(--pa-text-primary);
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+  }
+
+  &__section {
+    margin-bottom: $spacing-base;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__label {
+    display: block;
+    margin-bottom: $spacing-sm;
+    color: var(--pa-text-primary);
+    font-size: $font-size-sm;
+    font-weight: $font-weight-medium;
+  }
+
+  &__select {
+    width: 100%;
+    padding: $spacing-sm;
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    background: var(--pa-input-bg);
+    color: var(--pa-text-primary);
+    font-size: $font-size-sm;
+    cursor: pointer;
+
+    &:focus {
+      outline: none;
+      border-color: $accent-color;
+      box-shadow: 0 0 0 $focus-ring-width $accent-light;
+    }
+  }
+
+  &__checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+  }
+
+  &__checkbox {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--pa-text-primary);
+    font-size: $font-size-sm;
+
+    input[type="checkbox"] {
+      margin-right: $btn-icon-margin;
+      cursor: pointer;
+    }
+
+    &:hover {
+      color: $accent-color;
+    }
+  }
+
+  // Panel states
+  &--open {
+    right: 0; // Slide panel into view
+
+    .pa-settings-panel__toggle {
+      background: $accent-hover;
+      transform: rotate(180deg);
+    }
+  }
+}