diff options
Diffstat (limited to 'packages/ui')
| -rw-r--r-- | packages/ui/src/components/dialog.css | 3 | ||||
| -rw-r--r-- | packages/ui/src/components/select-dialog.css | 9 | ||||
| -rw-r--r-- | packages/ui/src/components/select-dialog.tsx | 2 |
3 files changed, 11 insertions, 3 deletions
diff --git a/packages/ui/src/components/dialog.css b/packages/ui/src/components/dialog.css index 267c891f3..1c7cd4f41 100644 --- a/packages/ui/src/components/dialog.css +++ b/packages/ui/src/components/dialog.css @@ -16,6 +16,7 @@ [data-component="dialog"] { position: fixed; inset: 0; + margin-left: var(--dialog-left-margin); z-index: 50; display: flex; align-items: center; @@ -24,7 +25,7 @@ [data-slot="dialog-container"] { position: relative; z-index: 50; - width: min(calc(100vw - 16px), 624px); + width: min(calc(100vw - 16px), 480px); height: min(calc(100vh - 16px), 512px); display: flex; flex-direction: column; diff --git a/packages/ui/src/components/select-dialog.css b/packages/ui/src/components/select-dialog.css index 696f68bf9..83085e082 100644 --- a/packages/ui/src/components/select-dialog.css +++ b/packages/ui/src/components/select-dialog.css @@ -121,12 +121,19 @@ line-height: var(--line-height-large); /* 142.857% */ letter-spacing: var(--letter-spacing-normal); + [data-slot="select-dialog-item-selected-icon"] { + display: none; + color: var(--icon-strong-base); + } + &[data-active="true"] { border-radius: var(--radius-md); background: var(--surface-raised-base-hover); } &[data-selected="true"] { - background: var(--surface-raised-base-hover); + [data-slot="select-dialog-item-selected-icon"] { + display: block; + } } } } diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx index 381c5f6fc..90c269eea 100644 --- a/packages/ui/src/components/select-dialog.tsx +++ b/packages/ui/src/components/select-dialog.tsx @@ -153,7 +153,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) { }} > {others.children(item)} - <Icon name="check-small" size="small" /> + <Icon data-slot="select-dialog-item-selected-icon" name="check-small" /> </button> )} </For> |
