summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/popover.css
diff options
context:
space:
mode:
authoropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-01-30 17:58:31 +0000
committeropencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>2026-01-30 17:58:31 +0000
commitfe66ca163cbb9d689cf296c4c2f7a63414c1cf45 (patch)
treee330cc07e4ce3b68f64592f7c123cfa1ce77ef23 /packages/ui/src/components/popover.css
parent20619a6a26ec0cfc2707b7ed13387715e9f9cdaa (diff)
downloadopencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.tar.gz
opencode-fe66ca163cbb9d689cf296c4c2f7a63414c1cf45.zip
chore: generate
Diffstat (limited to 'packages/ui/src/components/popover.css')
-rw-r--r--packages/ui/src/components/popover.css240
1 files changed, 118 insertions, 122 deletions
diff --git a/packages/ui/src/components/popover.css b/packages/ui/src/components/popover.css
index 5a8ad10a0..d200fe8b2 100644
--- a/packages/ui/src/components/popover.css
+++ b/packages/ui/src/components/popover.css
@@ -1,136 +1,132 @@
[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);
-
- 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);
- }
+ 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 popoverContentShow {
- from {
- opacity: 0;
- transform: scaleY(0.95);
- }
- to {
- opacity: 1;
- transform: scaleY(1);
- }
+ from {
+ opacity: 0;
+ transform: scaleY(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scaleY(1);
+ }
}
@keyframes popoverContentHide {
- from {
- opacity: 1;
- transform: scaleY(1);
- }
- to {
- opacity: 0;
- transform: scaleY(0.95);
- }
+ 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;
- }
+ 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;
+ }
}