arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-24 00:40:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Drawer): add inset prop

Browse Source 
Resolves #2994
This commit is contained in:
Benjamin Canac
2025-02-15 16:21:41 +01:00
parent fabf42735e
commit 6d9b9edc55
7 changed files with 490 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/theme/drawer.ts
View File

@@ -13,34 +13,87 @@ export default {
variants: {
direction: {
top: {
content: 'top-0 mb-24 flex-col-reverse rounded-b-[calc(var(--ui-radius)*2)]',
content: 'mb-24 flex-col-reverse',
handle: 'mb-4'
},
right: {
content: 'right-4 flex-row',
content: 'flex-row',
handle: 'ml-4'
},
bottom: {
content: 'bottom-0 mt-24 flex-col rounded-t-[calc(var(--ui-radius)*2)]',
content: 'mt-24 flex-col',
handle: 'mt-4'
},
left: {
content: 'left-4 flex-row-reverse',
content: 'flex-row-reverse',
handle: 'mr-4'
}
},
inset: {
true: {
content: 'rounded-[calc(var(--ui-radius)*2)] after:hidden'
}
}
},
compoundVariants: [{
direction: ['top', 'bottom'],
class: {
content: 'inset-x-0 h-auto max-h-[96%]',
content: 'h-auto max-h-[96%]',
handle: 'w-12 h-1.5 mx-auto'
}
}, {
direction: ['right', 'left'],
class: {
content: 'inset-y-4 w-auto max-w-[calc(100%-2rem)] rounded-[calc(var(--ui-radius)*2)] after:hidden',
content: 'w-auto max-w-[calc(100%-2rem)]',
handle: 'h-12 w-1.5 mt-auto mb-auto'
}
}, {
direction: 'top',
inset: true,
class: {
content: 'inset-x-4 top-4'
}
}, {
direction: 'top',
inset: false,
class: {
content: 'inset-x-0 top-0 rounded-b-[calc(var(--ui-radius)*2)]'
}
}, {
direction: 'bottom',
inset: true,
class: {
content: 'inset-x-4 bottom-4'
}
}, {
direction: 'bottom',
inset: false,
class: {
content: 'inset-x-0 bottom-0 rounded-t-[calc(var(--ui-radius)*2)]'
}
}, {
direction: 'left',
inset: true,
class: {
content: 'inset-y-4 left-4'
}
}, {
direction: 'left',
inset: false,
class: {
content: 'inset-y-0 left-0 rounded-r-[calc(var(--ui-radius)*2)]'
}
}, {
direction: 'right',
inset: true,
class: {
content: 'inset-y-4 right-4'
}
}, {
direction: 'right',
inset: false,
class: {
content: 'inset-y-0 right-0 rounded-l-[calc(var(--ui-radius)*2)]'
}
}]
}