@actabldesign/bellhop-core 0.0.8 → 0.0.12

package/dist/collection/components/bh-popover/bh-popover.css

@@ -1,310 +1,127 @@
-/* Popover Container */
-.popover {
+/* ==========================================================================
+   BH-POPOVER COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
   position: relative;
-  border-radius: var(--radius-md);
-  width: 320px;
 }
 
-.popover-content {
-  display: flex;
+/* Popover Wrapper */
+.popover-wrapper {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%); /* Centers the popover horizontally */
+  z-index: 1000;
+  width: max-content;
+  width: -webkit-max-content;
+  max-width: var(--max-width, 285px);
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  overflow: hidden;
-  position: relative;
-  width: 100%;
-  height: 100%;
+  align-items: center;
+  gap: 0;
+  padding: 0;
 }
 
-.popover-menu {
-  background-color: #ffffff;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  overflow: hidden;
-  position: relative;
-  border-radius: var(--radius-md);
-  flex-shrink: 0;
-  width: 100%;
-  max-height: 400px;
-  border: 1px solid #dcdfea;
-  box-shadow: var(--shadow-popover);
+.popover-wrapper.top {
+  bottom: 100%;
+  margin-bottom: 10px;
 }
 
-/* Header */
-.popover-header {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  padding: var(--spacing-lg) var(--spacing-xl);
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-  border-bottom: 1px solid #dcdfea;
+.popover-wrapper.bottom {
+  top: 100%;
+  margin-top: 10px;
 }
 
-.avatar-group {
+/* Popover Content Container */
+.popover-content {
   display: flex;
-  gap: var(--spacing-lg);
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  flex-shrink: 0;
+  flex-direction: column;
+  align-items: flex-start;
   width: 100%;
-}
-
-.avatar {
-  background-color: #ffffff;
-  position: relative;
-  border-radius: var(--radius-full);
-  flex-shrink: 0;
-  width: 40px;
-  height: 40px;
-  border: 0.75px solid rgba(0, 0, 0, 0.08);
+  gap: 0;
+  border-radius: var(--radius-md, 8px);
+  background-color: var(--color-white, #ffffff);
+  box-shadow: var(--shadow-md);
   overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
-.avatar-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+/* ==========================================================================
+   Popover Text (Default Variant)
+   ========================================================================== */
 
-.brand-info {
-  flex-basis: 0;
+.popover-text {
   display: flex;
   flex-direction: column;
-  flex-grow: 1;
   align-items: flex-start;
-  justify-content: flex-start;
-  line-height: 0;
-  min-height: 1px;
-  min-width: 1px;
-  position: relative;
-  flex-shrink: 0;
+  gap: 0;
+  padding: var(--sp-3, 12px);
 }
 
-.brand-name {
-  font-family: var(--font-inter);
-  font-weight: 600;
-  position: relative;
-  flex-shrink: 0;
-  color: #404968;
-  font-size: 14px;
-  line-height: 20px;
-  width: 100%;
-  text-overflow: ellipsis;
+.popover-text.with-title {
+  padding: var(--sp-3, 12px);
+  border-radius: var(--radius-md, 8px);
   overflow: hidden;
-  white-space: nowrap;
 }
 
-.portfolio-link {
-  font-family: var(--font-inter);
-  font-weight: 400;
-  position: relative;
-  flex-shrink: 0;
-  color: #2642cf;
-  font-size: 14px;
-  line-height: 20px;
-  width: 100%;
-  text-decoration: underline;
-  text-decoration-skip-ink: none;
-  text-underline-position: from-font;
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  padding: 0;
+.content-text {
+  font-family: var(--font-family-body, 'Inter', sans-serif);
+  font-size: var(--text-sm-size, 14px);
+  font-weight: var(--weight-medium, 500);
+  line-height: var(--text-xs-line, 18px);
+  letter-spacing: 0;
+  color: var(--color-neutral-600, #4a5578);
+  margin: 0;
+  white-space: pre-wrap;
 }
 
-.portfolio-link:hover {
-  color: #1a2bb8;
-}
+/* ==========================================================================
+   Popover Header (With Title Variant)
+   ========================================================================== */
 
-/* Search Container */
-.search-container {
-  box-sizing: border-box;
+.popover-header {
   display: flex;
   flex-direction: column;
-  gap: 6px;
   align-items: center;
-  justify-content: center;
-  overflow: visible;
+  gap: 0;
   padding: 0;
-  position: relative;
-  flex-shrink: 0;
   width: 100%;
-}
-
-.search-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-  padding: var(--spacing-xs) var(--spacing-none) var(--spacing-none) var(--spacing-lg);
-  align-items: flex-start;
-  justify-content: flex-start;
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-.search-content {
-  background-color: #ffffff;
-  box-sizing: border-box;
-  display: flex;
-  gap: var(--spacing-md);
-  height: var(--spacing-4xl);
-  align-items: center;
-  justify-content: flex-start;
-  overflow: hidden;
-  padding: var(--spacing-none);
-  position: relative;
-  border-radius: var(--radius-md);
-  flex-shrink: 0;
-  width: 100%;
-  border: none;
-}
-
-.search-icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-  color: #5d6b98;
-}
-
-.search-field {
-  flex-basis: 0;
-  font-family: var(--font-inter);
-  font-weight: 500;
-  flex-grow: 1;
-  line-height: 0;
-  min-height: 1px;
-  min-width: 1px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  position: relative;
-  flex-shrink: 0;
-  color: #404968;
-  font-size: 14px;
-  line-height: 20px;
-  white-space: nowrap;
-  border: none;
-  outline: none;
-  background: none;
-}
-
-.search-field::placeholder {
-  color: #5d6b98;
 }
 
-/* Menu Items */
-.menu-items {
-  box-sizing: border-box;
+.header-content {
   display: flex;
-  flex-direction: column;
+  gap: var(--sp-4, 16px);
   align-items: flex-start;
-  justify-content: flex-start;
-  overflow-y: auto;
-  padding: var(--spacing-xs) var(--spacing-none);
-  position: relative;
-  flex-grow: 1;
+  padding: var(--sp-3, 12px);
   width: 100%;
-  max-height: calc(400px - 180px);
 }
 
-.menu-header {
-  box-sizing: border-box;
+.header-text {
   display: flex;
   flex-direction: column;
+  flex: 1;
+  gap: var(--sp-1, 4px);
   align-items: flex-start;
-  justify-content: flex-start;
-  padding: var(--spacing-lg) var(--spacing-xl);
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-  border-top: 1px solid #dcdfea;
-  border-bottom: 1px solid #dcdfea;
-  font-family: var(--font-inter);
-  font-weight: 600;
-  line-height: 0;
-  color: #404968;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.menu-item-container {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  position: relative;
-  flex-shrink: 0;
-  width: 100%;
-}
-
-.menu-item {
-  flex-basis: 0;
-  box-sizing: border-box;
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: flex-start;
   min-height: 1px;
   min-width: 1px;
-  overflow: hidden;
-  padding: var(--spacing-md) var(--spacing-lg);
-  position: relative;
-  border-radius: var(--radius-sm);
-  flex-shrink: 0;
-  font-family: var(--font-inter);
-  font-weight: 500;
-  line-height: 0;
-  color: #404968;
-  font-size: 14px;
-  line-height: 20px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  text-align: left;
-  width: 100%;
-  transition: all 0.2s ease;
-}
-
-.menu-item:hover {
-  background-color: #f9f9fb;
-  color: #30374f;
-}
-
-.menu-item.selected {
-  background-color: #f9f9fb;
-  color: #30374f;
-}
-
-/* Property Type Styling */
-.menu-item-portfolio {
-  font-weight: 600;
-  color: #2642cf;
-}
-
-.menu-item-portfolio:hover {
-  color: #1a2bb8;
+  padding: 0;
 }
 
-.menu-item-region {
-  font-weight: 500;
-  padding-left: 26px;
-  color: #404968;
-  font-size: 13px;
+.title-text {
+  font-family: var(--font-family-body, 'Inter', sans-serif);
+  font-size: var(--text-sm-size, 14px);
+  font-weight: var(--weight-semibold, 600);
+  line-height: var(--text-sm-line, 20px);
+  letter-spacing: 0;
+  color: var(--color-neutral-900, #111322);
+  margin: 0;
+  width: 100%;
+  white-space: pre-wrap;
 }
 
-.menu-item-property {
-  color: #5d6b98;
-  font-size: 13px;
+/* Divider */
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-neutral-200, #dcdfea);
 }