diff options
Diffstat (limited to 'packages/ui/src/components/popover.css')
| -rw-r--r-- | packages/ui/src/components/popover.css | 216 |
1 files changed, 127 insertions, 89 deletions
diff --git a/packages/ui/src/components/popover.css b/packages/ui/src/components/popover.css index b49542afd..5a8ad10a0 100644 --- a/packages/ui/src/components/popover.css +++ b/packages/ui/src/components/popover.css @@ -1,98 +1,136 @@ [data-slot="popover-trigger"] { - display: inline-flex; + display: inline-flex; } [data-component="popover-content"] { - z-index: 50; - min-width: 200px; - max-width: 320px; - border-radius: var(--radius-md); - background-color: var(--surface-raised-stronger-non-alpha); - - border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); - background-clip: padding-box; - box-shadow: var(--shadow-md); - - transform-origin: var(--kb-popover-content-transform-origin); - - &:focus-within { - outline: none; - } - - &[data-closed] { - animation: popover-close 0.15s ease-out; - } - - &[data-expanded] { - animation: popover-open 0.15s ease-out; - } - - [data-slot="popover-header"] { - display: flex; - padding: 12px; - padding-bottom: 0; - justify-content: space-between; - align-items: center; - gap: 8px; - - [data-slot="popover-title"] { - flex: 1; - color: var(--text-strong); - margin: 0; - - font-family: var(--font-family-sans); - font-size: var(--font-size-base); - font-style: normal; - font-weight: var(--font-weight-medium); - line-height: var(--line-height-large); - letter-spacing: var(--letter-spacing-normal); - } - - [data-slot="popover-close-button"] { - flex-shrink: 0; - } - } - - [data-slot="popover-description"] { - padding: 0 12px; - margin: 0; - color: var(--text-base); - - font-family: var(--font-family-sans); - font-size: var(--font-size-small); - font-style: normal; - font-weight: var(--font-weight-regular); - line-height: var(--line-height-large); - letter-spacing: var(--letter-spacing-normal); - } - - [data-slot="popover-body"] { - padding: 12px; - } - - [data-slot="popover-arrow"] { - fill: var(--surface-raised-stronger-non-alpha); - } + z-index: 50; + min-width: 200px; + max-width: 320px; + border-radius: var(--radius-md); + background-color: var(--surface-raised-stronger-non-alpha); + + border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent); + background-clip: padding-box; + box-shadow: var(--shadow-md); + + transform-origin: var(--kb-popover-content-transform-origin); + + animation: popoverContentHide var(--transition-duration) + var(--transition-easing) forwards; + + @starting-style { + animation: none; + } + + &[data-expanded] { + pointer-events: auto; + animation: popoverContentShow var(--transition-duration) + var(--transition-easing) forwards; + } + + [data-origin-top-right] { + transform-origin: top right; + } + + [data-origin-top-left] { + transform-origin: top left; + } + + [data-origin-bottom-right] { + transform-origin: bottom right; + } + + [data-origin-bottom-left] { + transform-origin: bottom left; + } + + &:focus-within { + outline: none; + } + + [data-slot="popover-header"] { + display: flex; + padding: 12px; + padding-bottom: 0; + justify-content: space-between; + align-items: center; + gap: 8px; + + [data-slot="popover-title"] { + flex: 1; + color: var(--text-strong); + margin: 0; + + font-family: var(--font-family-sans); + font-size: var(--font-size-base); + font-style: normal; + font-weight: var(--font-weight-medium); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + } + + [data-slot="popover-close-button"] { + flex-shrink: 0; + } + } + + [data-slot="popover-description"] { + padding: 0 12px; + margin: 0; + color: var(--text-base); + + font-family: var(--font-family-sans); + font-size: var(--font-size-small); + font-style: normal; + font-weight: var(--font-weight-regular); + line-height: var(--line-height-large); + letter-spacing: var(--letter-spacing-normal); + } + + [data-slot="popover-body"] { + padding: 12px; + } + + [data-slot="popover-arrow"] { + fill: var(--surface-raised-stronger-non-alpha); + } } -@keyframes popover-open { - from { - opacity: 0; - transform: scale(0.96); - } - to { - opacity: 1; - transform: scale(1); - } +@keyframes popoverContentShow { + from { + opacity: 0; + transform: scaleY(0.95); + } + to { + opacity: 1; + transform: scaleY(1); + } } -@keyframes popover-close { - from { - opacity: 1; - transform: scale(1); - } - to { - opacity: 0; - transform: scale(0.96); - } +@keyframes popoverContentHide { + from { + opacity: 1; + transform: scaleY(1); + } + to { + opacity: 0; + transform: scaleY(0.95); + } +} + +[data-component="model-popover-content"] { + transform-origin: var(--kb-popper-content-transform-origin); + pointer-events: none; + animation: popoverContentHide var(--transition-duration) + var(--transition-easing) forwards; + + @starting-style { + animation: none; + } + + &[data-expanded] { + pointer-events: auto; + animation: popoverContentShow var(--transition-duration) + var(--transition-easing) forwards; + } } |