@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/page-navigation.css

@@ -1,294 +0,0 @@
-/* ==========================================================================
-   PAGE NAVIGATION COMPONENT - REACT IMPLEMENTATION
-   Unified styles for page navigation matching Angular functionality
-   ========================================================================== */
-
-/* Main Page Navigation Container */
-.page-navigation {
-  width: 320px;
-  min-width: 280px;
-  background-color: var(--color-white);
-  padding: var(--spacing-xl) var(--spacing-md);
-  font-family: var(--font-inter);
-  height: 100vh;
-  overflow-y: auto;
-  border-right: 1px solid var(--color-neutral-200);
-  box-sizing: border-box;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-
-.page-navigation-header {
-  margin-bottom: var(--spacing-3xl);
-}
-
-.page-navigation-title {
-  font-size: var(--text-xl-size);
-  font-weight: var(--weight-semibold);
-  line-height: var(--text-xl-line);
-  color: var(--color-neutral-900);
-  padding: var(--spacing-none) var(--spacing-xl);
-  margin: 0;
-}
-
-.page-navigation-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-/* ==========================================================================
-   SINGLE LEVEL NAVIGATION ITEMS
-   ========================================================================== */
-
-.page-navigation-single-level {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-lg);
-  cursor: pointer;
-  gap: var(--spacing-md);
-  position: relative;
-  transition: all 0.15s ease;
-  min-height: 40px;
-  max-height: 44px;
-  box-sizing: border-box;
-  border-radius: 6px;
-  margin: var(--spacing-none) var(--spacing-xs);
-  background-color: transparent;
-  border: 1px solid transparent;
-}
-
-/* Active/Selected state for single level */
-.page-navigation-single-level.active {
-  background-color: transparent;
-  border: 1px solid transparent;
-}
-
-/* Hover state for single level */
-.page-navigation-single-level:hover {
-  background-color: var(--color-neutral-50) !important;
-}
-
-/* ==========================================================================
-   MULTI LEVEL NAVIGATION ITEMS
-   ========================================================================== */
-
-.page-navigation-multi-level {
-  margin: var(--spacing-none) var(--spacing-xs);
-}
-
-.page-navigation-multi-level-parent {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-lg);
-  cursor: pointer;
-  gap: var(--spacing-md);
-  position: relative;
-  transition: all 0.15s ease;
-  min-height: 40px;
-  max-height: 44px;
-  box-sizing: border-box;
-  border-radius: var(--radius-sm);
-  background-color: transparent;
-  border: 1px solid transparent;
-}
-
-/* Has active child state */
-.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {
-  background-color: transparent;
-  border: 1px solid transparent;
-}
-
-/* Hover state for multi level parent */
-.page-navigation-multi-level-parent:hover {
-  background-color: var(--color-neutral-50) !important;
-}
-
-/* Children container with smooth animation */
-.page-navigation-children {
-  margin-top: var(--spacing-xs);
-  margin-bottom: var(--spacing-xs);
-  position: relative;
-  margin-left: var(--spacing-xl);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  /*overflow: hidden;*/
-  max-height: 1000px;
-  opacity: 1;
-  transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),
-    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),
-    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);
-}
-
-.page-navigation-children.collapsed {
-  max-height: 0;
-  opacity: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* Vertical line indicator for children */
-.page-navigation-children::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: -2px;
-  height: calc(100% + 4px);
-  width: 2px;
-  background-color: var(--color-neutral-200);
-  margin-left: var(--spacing-sm);
-  z-index: 2;
-}
-
-/* ==========================================================================
-   CHILD NAVIGATION ITEMS
-   ========================================================================== */
-
-.page-navigation-child {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-md) var(--spacing-lg);
-  cursor: pointer;
-  gap: var(--spacing-md);
-  position: relative;
-  transition: all 0.15s ease;
-  min-height: 36px;
-  box-sizing: border-box;
-  border-radius: var(--radius-sm);
-  margin: var(--spacing-none) var(--spacing-xs);
-  background-color: transparent;
-  border: 1px solid transparent;
-  margin-left: 9px;
-}
-
-/* Hover state for child items */
-.page-navigation-child:hover:not(.active) {
-  background-color: var(--color-neutral-50);
-  position: relative;
-  z-index: 1;
-}
-
-/* Hover overlay to cover the vertical line */
-.page-navigation-child:hover:not(.active)::after {
-  content: '';
-  position: absolute;
-  left: -20px;
-  top: 0;
-  bottom: 0;
-  width: 20px;
-  background-color: var(--color-neutral-100);
-  z-index: 1;
-  border-radius: var(--radius-sm);
-}
-
-/* Active/Selected state for child items */
-.page-navigation-child.active {
-  background-color: transparent;
-}
-
-/* Active line indicator for child items */
-.page-navigation-child.active::before {
-  content: '';
-  position: absolute;
-  left: -4.5px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 2px;
-  height: 24px;
-  background-color: var(--color-brand-600);
-  z-index: 3;
-}
-
-/* ==========================================================================
-   ITEM CONTENT AND COMMON ELEMENTS
-   ========================================================================== */
-
-.page-navigation-item-content,
-.page-navigation-child-content {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  width: 100%;
-}
-
-/* Icons */
-.page-navigation-item-icon {
-  flex-shrink: 0;
-  color: var(--color-neutral-600);
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  transition: color 0.15s ease;
-}
-
-/* Smooth animation class for page navigation items */
-.page-navigation-animate-smooth {
-  transform-origin: top center;
-  transition: all var(--animation-duration-normal) var(--animation-ease-enter);
-}
-
-/* Chevron icon styling - separate from main icons */
-.page-navigation-chevron-icon {
-  flex-shrink: 0;
-  color: var(--color-neutral-600);
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  transition: color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth);
-}
-
-/* Chevron rotation when expanded */
-.page-navigation-chevron-icon.expanded {
-  transform: rotate(180deg);
-}
-
-/* Icon color changes for active states */
-.page-navigation-single-level.active .page-navigation-item-icon,
-.page-navigation-multi-level.has-active-child .page-navigation-item-icon {
-  color: var(--color-neutral-900);
-}
-
-/* Labels */
-.page-navigation-item-label,
-.page-navigation-child-label {
-  font-family: 'Inter', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  color: var(--color-neutral-600);
-  flex: 1;
-  transition: all 0.15s ease;
-}
-
-
-/* Label color and weight changes for active states */
-.page-navigation-single-level.active .page-navigation-item-label,
-.page-navigation-multi-level.has-active-child .page-navigation-item-label {
-  color: var(--color-neutral-900);
-  font-weight: 600;
-}
-
-.page-navigation-child.active .page-navigation-child-label {
-  color: var(--color-brand-600);
-  font-weight: 600;
-}
-
-/* Badges */
-.page-navigation-item-badge,
-.page-navigation-child-badge {
-  margin-left: auto;
-}
-
-/* ==========================================================================
-   RESPONSIVE DESIGN
-   ========================================================================== */
-
-@media (max-width: 768px) {
-  .page-navigation {
-    width: 280px;
-    min-width: 280px;
-  }
-}

package/components/picker-menu.css

@@ -1,43 +0,0 @@
-/* ==========================================================================
-   PICKER MENU COMPONENT - DROPDOWN MENU PATTERN
-   ========================================================================== */
-
-@import '../tokens/bellhop-animations.css';
-
-/* Base picker menu styles - matching dropdown menu */
-.picker-menu {
-  width: 350px;
-  background: var(--color-white);
-  border-radius: var(--radius-md);
-  box-shadow: 0px 32px 64px -12px rgba(64, 73, 104, 0.14),
-    0px 0px 1px 1px rgba(64, 73, 104, 0.1);
-  border: 1px solid var(--color-neutral-200);
-  overflow: hidden;
-  flex-shrink: 0;
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* Footer - following dropdown menu pattern */
-.picker-menu-footer {
-  border-top: 1px solid var(--color-neutral-200);
-  padding: var(--spacing-xl) var(--spacing-xl);
-  background: var(--color-white);
-}
-
-.picker-menu-actions {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  gap: var(--spacing-lg);
-}
-
-/* When today button is present, use space-between layout */
-.picker-menu-actions.has-today-button {
-  justify-content: space-between;
-}
-
-.picker-menu-main-actions {
-  display: flex;
-  gap: var(--spacing-lg);
-}

package/components/pie-chart-card.css

@@ -1,213 +0,0 @@
-/* ==========================================================================
-   PIE CHART CARD COMPONENT - REACT IMPLEMENTATION
-   Unified styles for pie chart cards matching Angular functionality
-   ========================================================================== */
-
-/* Wrapper for card + footer */
-.pie-chart-card-wrapper {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--radius-lg, 12px);
-  overflow: visible;
-}
-
-/* Base Card Styles */
-.pie-chart-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xl, 20px);
-  font-family: var(--font-inter);
-  background: var(--color-white);
-  border: 1px solid var(--color-neutral-200);
-  border-radius: var(--radius-lg, 12px);
-  box-sizing: border-box;
-}
-
-/* Card with footer - remove bottom border radius */
-.pie-chart-card.has-footer {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border-bottom: none;
-}
-
-/* Dropdown Menu */
-.pie-chart-card-dropdown {
-  position: absolute;
-  top: var(--spacing-3xl, 24px);
-  right: var(--spacing-3xl, 24px);
-  z-index: 1000;
-}
-
-/* Adjust dropdown position for mobile */
-.pie-chart-card-mobile .pie-chart-card-dropdown {
-  top: var(--spacing-2xl, 20px);
-  right: var(--spacing-xl, 16px);
-}
-
-/* Header */
-.pie-chart-card-header {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs, 4px);
-}
-
-.pie-chart-card-heading {
-  color: var(--color-neutral-900);
-  font-size: var(--text-md-size);
-  font-weight: var(--weight-semibold);
-  line-height: var(--text-md-line);
-  margin: 0;
-}
-
-.pie-chart-card-subtitle {
-  color: var(--color-neutral-500);
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  margin: 0;
-}
-
-/* Chart Content */
-.pie-chart-card-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-}
-
-/* Chart and Legend Container */
-.chart-and-legend-container {
-  display: flex;
-  gap: var(--spacing-3xl);
-  align-items: center;
-}
-
-/* Chart Container */
-.pie-chart-container {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.chart-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-/* Chart Center Content */
-.chart-center-content {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-  pointer-events: none;
-  z-index: 10;
-}
-
-.chart-center-content.animated {
-  opacity: 0;
-  animation: chartCenterFadeIn 0.8s var(--animation-ease-enter) 0.4s forwards;
-}
-
-.chart-center-value {
-  font-size: var(--text-xl-size);
-  font-weight: var(--weight-semibold);
-  line-height: var(--text-xl-line);
-  color: var(--color-neutral-900);
-  margin-bottom: var(--spacing-xs);
-}
-
-.chart-center-badge-container {
-  display: flex;
-  justify-content: center;
-}
-
-/* Legend */
-.pie-chart-card-legend {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  width: 100%;
-}
-
-.legend-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.legend-color {
-  width: var(--spacing-sm);
-  height: var(--spacing-sm);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.legend-content {
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-xs);
-    flex: 1;
-    width: 100%;
-}
-
-.legend-text {
-  color: var(--color-neutral-700);
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  width: 100%;
-}
-
-.legend-values {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.legend-percentage {
-  color: var(--color-neutral-900);
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-medium);
-  line-height: var(--text-sm-line);
-}
-
-/* Responsive Dimensions - Desktop */
-.pie-chart-card-desktop {
-  min-width: 480px;
-  max-width: 600px;
-  width: fit-content;
-  padding: var(--spacing-3xl, 24px);
-}
-
-/* Responsive Dimensions - Mobile */
-.pie-chart-card-mobile {
-  min-width: 320px;
-  max-width: 480px;
-  width: fit-content;
-  padding: var(--spacing-2xl, 20px);
-}
-
-/* Mobile adjustments */
-.pie-chart-card-mobile .chart-and-legend-container {
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-  align-items: flex-start;
-}
-
-.pie-chart-card-mobile .pie-chart-card-legend {
-  width: 100%;
-  min-width: auto;
-}
-
-/* Animations */
-@keyframes chartCenterFadeIn {
-  0% {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.8);
-  }
-  100% {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}

package/components/pie-chart.css

@@ -1,80 +0,0 @@
-/* ==========================================================================
-   PIE CHART COMPONENT - REACT IMPLEMENTATION
-   Unified styles for pie charts matching Angular functionality
-   ========================================================================== */
-
-.pie-chart-container {
-  display: inline-block;
-  width: 160px;
-  height: 160px;
-  overflow: visible;
-}
-
-.pie-chart-svg {
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-}
-
-.pie-segment {
-  cursor: pointer;
-  transition: opacity var(--animation-duration-fast) var(--animation-ease-smooth);
-  transform-origin: 80px 80px;
-}
-
-.pie-segment.animated {
-  opacity: 0;
-  transform: scale(0.3) rotate(-180deg);
-  animation: pieSliceReveal 0.8s var(--animation-ease-enter) forwards;
-}
-
-.pie-segment:hover {
-  opacity: 0.85;
-  transform: scale(1.05);
-  filter: brightness(1.1);
-  transition: all var(--animation-duration-fast) var(--animation-ease-smooth);
-}
-
-.pie-background {
-  pointer-events: none;
-}
-
-.pie-inner-hole {
-  pointer-events: none;
-}
-
-.pie-segment-group {
-  pointer-events: auto;
-}
-
-@keyframes pieSliceReveal {
-  0% {
-    opacity: 0;
-    transform: scale(0.3) rotate(-180deg);
-  }
-  15% {
-    opacity: 0.2;
-    transform: scale(0.45) rotate(-135deg);
-  }
-  30% {
-    opacity: 0.5;
-    transform: scale(0.7) rotate(-70deg);
-  }
-  45% {
-    opacity: 0.7;
-    transform: scale(0.9) rotate(-25deg);
-  }
-  60% {
-    opacity: 0.85;
-    transform: scale(1.05) rotate(-8deg);
-  }
-  80% {
-    opacity: 0.95;
-    transform: scale(1.01) rotate(-1deg);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1) rotate(0deg);
-  }
-}
-