Skip to content

Commit

Permalink
overlaypanel preset improvements [fix #84]
Browse files Browse the repository at this point in the history
  • Loading branch information
@atakantepe
atakantepe committed Feb 12, 2024
1 parent 0227202 commit 097fb9c
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 6 deletions.
12 changes: 9 additions & 3 deletions presets/lara/overlaypanel/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,17 @@ export default {
'dark:border-surface-700',

// Before: Triangle
'before:absolute before:-top-2 before:ml-4',
'before:absolute before:-top-[9px] before:-ml-[9px] before:left-[calc(var(--overlayArrowLeft,0)+1.25rem)] z-0',
'before:w-0 before:h-0',
'before:border-transparent before:border-solid',
'before:border-x-[0.5rem] before:border-b-[0.5rem]',
'before:border-t-0 before:border-b-surface-0 dark:before:border-b-surface-800'
'before:border-x-[8px] before:border-[8px]',
'before:border-t-0 before:border-b-surface-300/10 dark:before:border-b-surface-700',

'after:absolute after:-top-2 after:-ml-[8px] after:left-[calc(var(--overlayArrowLeft,0)+1.25rem)]',
'after:w-0 after:h-0',
'after:border-transparent after:border-solid',
'after:border-x-[0.5rem] after:border-[0.5rem]',
'after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-800'
]
},
content: {
Expand Down
12 changes: 9 additions & 3 deletions presets/wind/overlaypanel/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,17 @@ export default {
'dark:border-surface-700',

// Before: Triangle
'before:absolute before:-top-2 before:ml-4 before:z-50',
'before:absolute before:-top-[9px] before:-ml-[9px] before:left-[calc(var(--overlayArrowLeft,0)+1.25rem)] z-0',
'before:w-0 before:h-0 before:shadow-xl',
'before:border-transparent before:border-solid',
'before:border-x-[0.5rem] before:border-b-[0.5rem]',
'before:border-t-0 before:border-b-surface-0 dark:before:border-b-surface-800'
'before:border-x-[8px] before:border-[8px]',
'before:border-t-0 before:border-b-surface-300/10 dark:before:border-b-surface-700',

'after:absolute after:-top-2 after:-ml-[8px] after:left-[calc(var(--overlayArrowLeft,0)+1.25rem)]',
'after:w-0 after:h-0',
'after:border-transparent after:border-solid',
'after:border-x-[0.5rem] after:border-[0.5rem]',
'after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-800'
]
},
content: {
Expand Down

1 comment on commit 097fb9c

@wijzijnweb
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The +1.25rem isn't always right. For a small icon button this is way off.

image

For me this look already way better:

 'before:absolute before:w-0 before:-top-[8px] before:h-0 before:border-transparent before:border-solid before:ml-[calc(var(--overlayArrowLeft,0)+6px)] before:border-x-[10px] before:border-b-[10px] before:border-t-0 before:border-b-surface-200 dark:before:border-b-surface-700',
 'after:absolute after:w-0 after:-top-[6px] after:h-0 after:border-transparent after:border-solid after:ml-[calc(var(--overlayArrowLeft,0)+6px)] after:border-x-[9px] after:border-b-[8px] after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-900'

The width of the arrow is a fixed pixels. I think it's right to offset it using pixels to get it perfect.

Related issue: #196

Please sign in to comment.