@keenmate/pure-admin-core 1.0.0 → 1.1.0

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

@@ -1,389 +1,400 @@
-/* ========================================
-   Profile Panel Components
-   Profile panel and header button
-   ======================================== */
-@use '../variables' as *;
-
-// CSS variable for profile panel width (allows utility class override)
-:root {
-  --pa-profile-panel-width: #{$profile-panel-width};
-  --pa-profile-panel-max-width: #{$profile-panel-max-width};
-}
-
-// Profile panel content width - :where() for low specificity (utility classes can override)
-:where(.pa-profile-panel__content) {
-  width: var(--pa-profile-panel-width);
-  max-width: var(--pa-profile-panel-max-width);
-}
-
-// ====================
-// 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;
-    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: 1px solid var(--pa-border-color);
-    display: flex;
-    align-items: flex-start;
-    gap: $spacing-base;
-    position: relative;
-
-    // No-avatar variant for corporate apps without user photos
-    &--no-avatar {
-      .pa-profile-panel__avatar {
-        display: none;
-      }
-    }
-  }
-
-  &__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: var(--pa-accent);
-  }
-
-  &__info {
-    flex: 1;
-    min-width: 0;
-    padding-right: $profile-close-size; // Space for close button
-  }
-
-  &__name {
-    margin: 0 0 $spacing-xs 0;
-    font-size: $font-size-lg;
-    font-weight: $font-weight-semibold;
-    color: var(--pa-text-primary);
-    // Truncate long names
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__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 0; // Vertical only - items handle horizontal
-    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: $sidebar-item-gap;
-    padding: $sidebar-padding;
-    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-base;
-    width: $sidebar-icon-size;
-    height: $sidebar-icon-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__actions {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-md;
-    margin-top: auto;
-    padding: 0 $profile-panel-content-padding;
-  }
-
-  // Fixed footer - always visible at bottom, content scrolls above
-  &__footer {
-    flex-shrink: 0;
-    padding: $spacing-lg; // Matches header padding
-    border-top: $border-width-base solid var(--pa-border-color);
-    background-color: var(--pa-card-bg);
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-md;
-  }
-
-  // Tabs section
-  &__tabs {
-    padding: 0 $profile-panel-content-padding;
-    border-bottom: $border-width-base solid var(--pa-border-color);
-    background-color: var(--pa-header-bg);
-
-    .pa-tabs {
-      border-bottom: none;
-      margin-bottom: 0;
-    }
-
-    .pa-tabs__item {
-      color: var(--pa-header-text-secondary);
-      border-bottom-color: transparent;
-
-      &:hover {
-        color: var(--pa-header-text);
-        background-color: var(--pa-accent-light);
-      }
-
-      &--active {
-        color: var(--pa-header-text);
-        border-bottom-color: var(--pa-accent);
-      }
-    }
-  }
-
-  // Favorites section
-  &__favorites {
-    ul {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-    }
-
-    li {
-      margin-bottom: $spacing-sm;
-    }
-  }
-
-  &__favorite-item {
-    display: flex;
-    align-items: center;
-    gap: $sidebar-item-gap;
-    padding: $sidebar-padding;
-    color: var(--pa-text-primary);
-    text-decoration: none;
-    border-radius: $border-radius;
-    cursor: pointer;
-    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;
-    }
-  }
-
-  &__favorite-icon {
-    font-size: $font-size-base;
-    width: $sidebar-icon-size;
-    height: $sidebar-icon-size;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &__favorite-label {
-    flex: 1;
-  }
-
-  // Favorite remove button
-  &__favorite-remove {
-    opacity: 0;
-    margin-left: auto;
-    background: none;
-    border: none;
-    padding: $spacing-xs;
-    color: var(--pa-text-secondary);
-    cursor: pointer;
-    border-radius: $border-radius;
-    font-size: $font-size-sm;
-    line-height: 1;
-    transition: opacity $transition-fast $easing-snappy,
-                color $transition-fast $easing-snappy,
-                background-color $transition-fast $easing-snappy;
-
-    &:hover {
-      color: var(--pa-danger);
-      background-color: var(--pa-danger-bg-light);
-    }
-  }
-
-  // Show remove button on favorite-item hover
-  &__favorite-item:hover &__favorite-remove {
-    opacity: 1;
-  }
-
-  &__favorites-add {
-    margin-top: auto;
-    padding: $spacing-md $profile-panel-content-padding 0;
-  }
-}
-
-// 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;
-  }
-}
+/* ========================================
+   Profile Panel Components
+   Profile panel and header button
+   ======================================== */
+@use '../variables' as *;
+
+// Local CSS variables for profile panel (runtime state, modified by JS for resize)
+:root {
+  --pa-local-profile-panel-width: #{$profile-panel-width};
+  --pa-local-profile-panel-max-width: #{$profile-panel-max-width};
+}
+
+// Profile panel content width - :where() for low specificity (utility classes can override)
+:where(.pa-profile-panel__content) {
+  width: var(--pa-local-profile-panel-width);
+  max-width: var(--pa-local-profile-panel-max-width);
+}
+
+// ====================
+// Profile Panel & Header Button
+// ====================
+
+// Header profile button
+.pa-header__profile-btn {
+  display: flex;
+  align-items: center;
+  gap: $spacing-xs;
+  background: none;
+  border: none;
+  padding: $spacing-xs $spacing-sm; // Match nav item padding
+  border-radius: $border-radius;
+  color: var(--pa-header-text);  // Use header text color, not content text color
+  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: var(--pa-header-profile-name-color);  // Use CSS variable for theme control
+}
+
+// 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;
+    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: 1px solid var(--pa-border-color);
+    display: flex;
+    align-items: flex-start;
+    gap: $spacing-base;
+    position: relative;
+
+    // No-avatar variant for corporate apps without user photos
+    &--no-avatar {
+      .pa-profile-panel__avatar {
+        display: none;
+      }
+    }
+  }
+
+  &__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: var(--pa-accent);
+  }
+
+  &__info {
+    flex: 1;
+    min-width: 0;
+    padding-right: $profile-close-size; // Space for close button
+  }
+
+  &__name {
+    margin: 0 0 $spacing-xs 0;
+    font-size: $font-size-lg;
+    font-weight: $font-weight-semibold;
+    color: var(--pa-text-color-1);
+    // Truncate long names
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__email {
+    margin: 0 0 $spacing-sm 0;
+    font-size: $font-size-sm;
+    color: var(--pa-text-color-2);
+    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-color-2);
+    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 0; // Vertical only - items handle horizontal
+    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: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pa-text-color-1);
+    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-base;
+    width: $sidebar-icon-size;
+    height: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+    margin-top: auto;
+    padding: 0 $profile-panel-content-padding;
+  }
+
+  // Fixed footer - always visible at bottom, content scrolls above
+  &__footer {
+    flex-shrink: 0;
+    padding: $spacing-lg; // Matches header padding
+    border-top: $border-width-base solid var(--pa-border-color);
+    background-color: var(--pa-card-bg);
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-md;
+  }
+
+  // Tabs section
+  &__tabs {
+    padding: 0 $profile-panel-content-padding;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    background-color: var(--pa-header-bg);
+
+    .pa-tabs {
+      border-bottom: none;
+      margin-bottom: 0;
+    }
+
+    .pa-tabs__item {
+      color: var(--pa-header-text-secondary);
+      border-bottom-color: transparent;
+
+      &:hover {
+        color: var(--pa-header-text);
+        background-color: var(--pa-accent-light);
+      }
+
+      &--active {
+        color: var(--pa-header-text);
+        border-bottom-color: var(--pa-accent);
+      }
+    }
+
+    // Icon-only tabs modifier - hides text labels
+    &--icon-only .pa-profile-panel__tab-text {
+      display: none;
+    }
+  }
+
+  // Tab text element (for icon-only toggle)
+  &__tab-text {
+    // Default: visible
+  }
+
+  // Favorites section
+  &__favorites {
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    li {
+      margin-bottom: $spacing-sm;
+    }
+  }
+
+  &__favorite-item {
+    display: flex;
+    align-items: center;
+    gap: $sidebar-item-gap;
+    padding: $sidebar-padding;
+    color: var(--pa-text-color-1);
+    text-decoration: none;
+    border-radius: $border-radius;
+    cursor: pointer;
+    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;
+    }
+  }
+
+  &__favorite-icon {
+    font-size: $font-size-base;
+    width: $sidebar-icon-size;
+    height: $sidebar-icon-size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__favorite-label {
+    flex: 1;
+  }
+
+  // Favorite remove button
+  &__favorite-remove {
+    opacity: 0;
+    margin-left: auto;
+    background: none;
+    border: none;
+    padding: $spacing-xs;
+    color: var(--pa-text-color-2);
+    cursor: pointer;
+    border-radius: $border-radius;
+    font-size: $font-size-sm;
+    line-height: 1;
+    transition: opacity $transition-fast $easing-snappy,
+                color $transition-fast $easing-snappy,
+                background-color $transition-fast $easing-snappy;
+
+    &:hover {
+      color: var(--pa-danger-bg);
+      background-color: var(--pa-danger-bg-light);
+    }
+  }
+
+  // Show remove button on favorite-item hover
+  &__favorite-item:hover &__favorite-remove {
+    opacity: 1;
+  }
+
+  &__favorites-add {
+    margin-top: auto;
+    padding: $spacing-md $profile-panel-content-padding 0;
+  }
+}
+
+// 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;
+  }
+}