@actabldesign/bellhop-styles 0.0.3 → 0.0.12

package/components/product-switcher.css

@@ -1,127 +0,0 @@
-/* Container wrapper */
-.product-switcher-container {
-  position: fixed;
-  z-index: 10000;
-  animation: popoverSlideIn 0.3s ease-out;
-  transform-origin: top center;
-}
-
-/* Backdrop */
-.product-switcher-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: transparent;
-  z-index: 9999;
-}
-
-/* Product Switcher Popover */
-.product-switcher-popover {
-  background: rgba(255, 255, 255, 0.9);
-  border: 1px solid #eff1f5;
-  border-radius: var(--radius-md);
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(3px);
-  box-shadow: 0px 24px 48px -12px rgba(64, 73, 104, 0.1);
-  padding: var(--spacing-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-  min-width: 250px;
-  position: relative;
-  z-index: 10001;
-}
-
-@keyframes popoverSlideIn {
-  0% {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.product-switcher-container.closing {
-  animation: popoverSlideOut 0.2s ease-in forwards;
-}
-
-@keyframes popoverSlideOut {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(-12px);
-  }
-}
-
-/* Product Item */
-.product-item {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-lg);
-  width: 100%;
-  padding: var(--spacing-xs);
-  border-radius: var(--radius-md);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.product-item:hover {
-  background-color: var(--color-neutral-100);
-}
-
-.product-item.current {
-  background-color: rgba(38, 66, 207, 0.1);
-}
-
-/* Product Icon Container */
-.product-icon-container {
-  width: 36px;
-  height: 36px;
-  background: #ffffff;
-  border: 0.77px solid #dcdfea;
-  border-radius: var(--radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  padding: var(--spacing-xs);
-}
-
-.product-icon {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  object-position: center;
-  filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%)
-    hue-rotate(222deg) brightness(97%) contrast(101%);
-}
-
-/* Product Info */
-.product-info {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.product-name {
-  font-family: var(--font-inter);
-  font-weight: var(--weight-semibold);
-  font-size: var(--text-md-size);
-  line-height: var(--text-md-line);
-  color: var(--color-neutral-900);
-}
-
-.product-description {
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-500);
-}

package/components/property-switcher.css

@@ -1,95 +0,0 @@
-.property-switcher {
-  position: relative;
-  display: inline-block;
-  width: 180px;
-}
-
-.property-selector {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--spacing-xxs);
-  padding: var(--spacing-xxs) var(--spacing-xs);
-  margin: var(--spacing-none) var(--spacing-xs);
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  border-radius: var(--radius-sm);
-  transition: background-color 0.2s ease;
-  width: 100%;
-  height: 32px;
-  min-width: 0;
-}
-
-.property-selector:hover {
-  background-color: var(--color-neutral-100);
-}
-
-.property-name {
-  font-family: var(--font-inter);
-  font-weight: var(--weight-medium);
-  font-size: var(--text-sm-size);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-600);
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  flex-grow: 1;
-  min-width: 0;
-  max-width: 180px;
-}
-
-.expand-icon {
-  font-size: var(--sp-5);
-  width: var(--sp-5);
-  height: var(--sp-5);
-  flex-shrink: 0;
-  color: var(--color-neutral-600);
-  transition: color 0.2s ease;
-}
-
-.popover-container {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  margin-top: var(--spacing-xs);
-  animation: popoverSlideIn 0.3s ease-out;
-  transform-origin: top center;
-}
-
-@keyframes popoverSlideIn {
-  0% {
-    opacity: 0;
-    transform: translateY(calc(-1 * var(--spacing-lg)));
-  }
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.popover-container.closing {
-  animation: popoverSlideOut 0.2s ease-in forwards;
-}
-
-@keyframes popoverSlideOut {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  100% {
-    opacity: 0;
-    transform: translateY(calc(-1 * var(--spacing-lg)));
-  }
-}
-
-/* Dropdown menu positioning (same as popover) */
-.dropdown-menu-container {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  margin-top: var(--spacing-xs);
-  max-height: 320px; /* Height to fit exactly 5 items without scrolling */
-}

package/components/radio-button-label.css

@@ -1,53 +0,0 @@
-.radio-button-label-wrapper {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.radio-button-label-wrapper.radio-button-label-disabled {
-  cursor: not-allowed;
-}
-
-/* Align radio button with the label text baseline */
-.radio-button-label-wrapper .radio {
-  margin-top: 2px;
-}
-
-.radio-button-label-wrapper .radio-sm {
-  margin-top: 3px;
-}
-
-.label-content {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.label-text {
-  font-family: var(--font-inter);
-  font-size: var(--text-md-size);
-  font-weight: var(--weight-medium);
-  color: var(--color-neutral-900);
-  margin: 0;
-  cursor: inherit;
-  display: block;
-}
-
-.label-text.label-disabled {
-  color: var(--color-neutral-400);
-}
-
-.supporting-text {
-  font-family: var(--font-inter);
-  font-size: var(--text-sm-size);
-  font-weight: var(--weight-regular);
-  line-height: var(--text-sm-line);
-  color: var(--color-neutral-500);
-  margin: 0;
-}
-
-.supporting-text.supporting-disabled {
-  color: var(--color-neutral-400);
-}

package/components/radio-button.css

@@ -1,134 +0,0 @@
-/* ==========================================================================
-   RADIO BUTTON COMPONENT STYLES - Following Figma Design
-   ========================================================================== */
-
-.radio {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  outline: none;
-  user-select: none;
-  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
-  box-sizing: border-box;
-  background: var(--color-white);
-  border: 2px solid var(--color-neutral-300);
-  border-radius: var(--radius-full);
-  position: relative;
-}
-
-/* Size Variants - Following Figma Specs */
-.radio-sm {
-  width: 16px;
-  height: 16px;
-}
-
-.radio-md {
-  width: 20px;
-  height: 20px;
-}
-
-/* State: Default (unselected) */
-.radio {
-  border-color: var(--color-neutral-300);
-}
-
-/* State: Selected */
-.radio.radio-selected {
-  background: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-  animation: fillExpand 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* State: Hover */
-.radio:hover:not(.radio-disabled) {
-  background: var(--color-neutral-100);
-  border-color: var(--color-neutral-300);
-}
-
-.radio.radio-selected:hover:not(.radio-disabled) {
-  background: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-}
-
-/* State: Focused */
-.radio.radio-focused:not(.radio-disabled) {
-  border-color: var(--color-neutral-300);
-  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
-    0px 0px 0px 2px var(--color-white);
-}
-
-.radio.radio-selected.radio-focused:not(.radio-disabled) {
-  background: var(--color-brand-600);
-  border-color: var(--color-brand-600);
-  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
-    0px 0px 0px 2px var(--color-white);
-}
-
-/* State: Disabled */
-.radio.radio-disabled {
-  background: var(--color-neutral-50);
-  border-color: var(--color-neutral-300);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
-.radio.radio-selected.radio-disabled {
-  background: var(--color-neutral-50);
-  border: 2px solid var(--color-neutral-300);
-}
-
-/* Radio Dot (inner circle) */
-.radio-dot {
-  width: 0;
-  height: 0;
-  border-radius: var(--radius-full);
-  background: var(--color-white);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
-    height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Radio Dot animation when selected */
-.radio.radio-selected .radio-dot {
-  width: 6px;
-  height: 6px;
-}
-
-/* Radio Dot for small size when selected */
-.radio-sm.radio-selected .radio-dot {
-  width: 4px;
-  height: 4px;
-}
-
-/* Disabled radio dot */
-.radio-disabled .radio-dot {
-  background: var(--color-neutral-300);
-}
-
-/* Focus outline for accessibility */
-.radio:focus {
-  outline: none;
-}
-
-.radio:focus:not(.radio-disabled) {
-  box-shadow: 0px 0px 0px 4px var(--color-brand-100),
-    0px 0px 0px 2px var(--color-white);
-}
-
-/* Animation for blue fill effect */
-@keyframes fillExpand {
-  0% {
-    transform: scale(0.95);
-  }
-  50% {
-    transform: scale(1.05);
-  }
-  100% {
-    transform: scale(1);
-  }
-}

package/components/sidebar.css

@@ -1,178 +0,0 @@
-/* ==========================================================================
-   SIDEBAR COMPONENT
-   Vertical navigation sidebar with gradient bar
-   ========================================================================== */
-
-.sidebar-container {
-  width: fit-content;
-  height: 100vh;
-  background-color: var(--color-white);
-  position: relative;
-  display: flex;
-}
-
-.navigation {
-  background-color: var(--color-white);
-  display: flex;
-  height: 100%;
-  align-items: flex-start;
-  justify-content: flex-start;
-  position: relative;
-  border-right: 1px solid var(--color-neutral-200);
-  z-index: 100;
-}
-
-/* Gradient bar on the left edge */
-.gradient-bar {
-  position: relative;
-  width: var(--spacing-xs);
-  height: 100%;
-  flex-shrink: 0;
-}
-
-.detail-bar {
-  position: absolute;
-  background: linear-gradient(
-    180deg,
-    var(--color-accent-300) 0%,
-    var(--color-brand-400) 51%,
-    var(--color-brand-800) 100%
-  );
-  inset: 0;
-}
-
-/* Main sidebar content */
-.sidebar-content {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-  height: 100%;
-  align-items: center;
-  justify-content: flex-start;
-  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg)
-    var(--spacing-md);
-  position: relative;
-  flex-shrink: 0;
-  width: 60px;
-}
-
-/* Navigation section that contains search and nav items */
-.navigation-section {
-  flex: 1 1 0%;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xl);
-  flex-grow: 1;
-  align-items: center;
-  justify-content: flex-start;
-  min-height: 0;
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-/* Search container */
-.search-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-/* Nav items container */
-.nav-items {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-/* Footer section with footer nav and avatar */
-.sidebar-footer {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  align-items: center;
-  justify-content: end;
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-.footer-navigation {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-/* Collapsed state */
-.sidebar-collapsed .sidebar-content {
-  width: 60px;
-}
-
-.sidebar-collapsed .nav-item-label {
-  display: none;
-}
-
-/* Scrollbar styling for navigation section */
-.navigation-section::-webkit-scrollbar {
-  width: 4px;
-}
-
-.navigation-section::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.navigation-section::-webkit-scrollbar-thumb {
-  background: var(--color-neutral-200);
-  border-radius: var(--radius-xs);
-}
-
-.navigation-section::-webkit-scrollbar-thumb:hover {
-  background: var(--color-neutral-300);
-}
-
-/* Firefox scrollbar */
-.navigation-section {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-neutral-200) transparent;
-}
-
-/* Expanded state (optional future enhancement) */
-.sidebar-expanded .sidebar-content {
-  width: 240px;
-}
-
-.sidebar-expanded .nav-items {
-  align-items: flex-start;
-}
-
-.sidebar-expanded .nav-item {
-  width: 100%;
-  flex-direction: row;
-  justify-content: flex-start;
-  gap: var(--spacing-md);
-}
-
-.sidebar-expanded .nav-item-label {
-  display: block;
-  text-align: left;
-  font-size: var(--text-sm-size);
-  height: auto;
-  line-height: var(--text-sm-line);
-}

package/components/skeleton-loader.css

@@ -1,47 +0,0 @@
-/* ==========================================================================
-   SKELETON LOADER COMPONENT
-   Shared styles for all frameworks
-   ========================================================================== */
-
-.skeleton {
-  display: inline-block;
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.06) 25%,
-    rgba(0, 0, 0, 0.03) 50%,
-    rgba(0, 0, 0, 0.06) 75%
-  );
-  background-size: 400% 100%;
-  animation: shimmer 1.5s ease-in-out infinite;
-  border-radius: var(--radius-sm);
-  line-height: 1;
-}
-
-.skeleton-circle {
-  border-radius: 50%;
-}
-
-.skeleton::before {
-  content: '\00a0';
-}
-
-@keyframes shimmer {
-  0% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0 50%;
-  }
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}