Skip to content

Commit

Permalink
styles: menu demos (#203)
Browse files Browse the repository at this point in the history
  • Loading branch information
@huntabyte
huntabyte authored Dec 4, 2023
1 parent a8f18d1 commit 04afd24
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 48 deletions.
22 changes: 11 additions & 11 deletions src/components/demos/dropdown-menu-demo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@

<DropdownMenu.Root>
<DropdownMenu.Trigger
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background text-sm font-medium text-foreground shadow-btn transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
class="focus-visible inline-flex h-10 w-10 items-center justify-center rounded-full border border-border-input bg-background text-sm font-medium text-foreground shadow-btn hover:bg-muted focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
<DotsThree class="h-6 w-6 text-foreground" />
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="w-full max-w-[229px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover"
transition={flyAndScale}
sideOffset={8}
>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<div class="flex items-center">
<UserCircle class="mr-2 text-foreground-alt sq-5" />
Expand All @@ -44,7 +44,7 @@
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<div class="flex items-center">
<Cardholder class="mr-2 text-foreground-alt sq-5" />
Expand All @@ -64,7 +64,7 @@
</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<div class="flex items-center">
<GearSix class="mr-2 text-foreground-alt sq-5" />
Expand All @@ -86,7 +86,7 @@
<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-muted" />
<DropdownMenu.Sub>
<DropdownMenu.SubTrigger
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted data-[state=open]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
>
<div class="flex items-center">
<UserCirclePlus class="mr-2 text-foreground-alt sq-5" />
Expand All @@ -97,12 +97,12 @@
</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover !ring-0 !ring-transparent"
transition={flyAndScale}
sideOffset={10}
>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<Avatar.Root
class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
Expand All @@ -120,7 +120,7 @@
@huntabyte
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<Avatar.Root
class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
Expand All @@ -138,7 +138,7 @@
@pavel_stianko
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<Avatar.Root
class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
Expand All @@ -156,7 +156,7 @@
@cokakoala_
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none transition-colors data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
<Avatar.Root
class="relative mr-3 flex shrink-0 overflow-hidden rounded-full border border-foreground/50 sq-5"
Expand Down
74 changes: 37 additions & 37 deletions src/components/demos/menubar-demo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,24 @@
</script>

<Menubar.Root
class="flex h-12 items-center gap-1 rounded-[10px] border border-dark-10 bg-background px-[3px] shadow-mini"
class="flex h-12 items-center gap-1 rounded-10px border border-dark-10 bg-background px-[3px] shadow-mini"
>
<div class="px-[10px]">
<div class="px-2.5">
<Cat class="sq-6" />
</div>
<Menubar.Menu>
<Menubar.Trigger
class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
class="inline-flex h-10 cursor-default items-center justify-center rounded-9px px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
>View</Menubar.Trigger
>
<Menubar.Content
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover !ring-0 !ring-transparent "
transition={flyAndScale}
align="start"
sideOffset={3}
>
<Menubar.CheckboxItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
bind:checked={pixelGrid}
>
Pixel grid
Expand All @@ -44,7 +44,7 @@
{/if}
</Menubar.CheckboxItem>
<Menubar.CheckboxItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
bind:checked={layoutGrid}
>
Layout grid
Expand All @@ -61,7 +61,7 @@
<Menubar.RadioGroup bind:value={view}>
<Menubar.RadioItem
value="table"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
Table
<Menubar.RadioIndicator class="ml-auto">
Expand All @@ -70,7 +70,7 @@
</Menubar.RadioItem>
<Menubar.RadioItem
value="board"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
Board
<Menubar.RadioIndicator class="ml-auto">
Expand All @@ -79,7 +79,7 @@
</Menubar.RadioItem>
<Menubar.RadioItem
value="gallery"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>
Gallery
<Menubar.RadioIndicator class="ml-auto">
Expand All @@ -91,84 +91,84 @@
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger
class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
>Edit</Menubar.Trigger
>
<Menubar.Content
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover"
transition={flyAndScale}
align="start"
sideOffset={3}
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Undo</Menubar.Item
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Redo</Menubar.Item
>
<Menubar.Separator />
<Menubar.Sub>
<Menubar.SubTrigger
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
>
Find
<div class="ml-auto flex items-center gap-px">
<CaretRight class="h-4 w-4 text-foreground-alt" />
</div>
</Menubar.SubTrigger>
<Menubar.SubContent
class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover"
transition={flyAndScale}
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Search the web</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Find...</Menubar.Item
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Find Next</Menubar.Item
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Find Previous</Menubar.Item
>
</Menubar.SubContent>
</Menubar.Sub>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Cut</Menubar.Item
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Copy</Menubar.Item
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Paste</Menubar.Item
>
</Menubar.Content>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger
class="inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
class="inline-flex h-10 cursor-default items-center justify-center rounded-9px px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
>View</Menubar.Trigger
>
<Menubar.Content
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover"
transition={flyAndScale}
align="start"
sideOffset={3}
>
<Menubar.CheckboxItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
bind:checked={bookmarks}
>
Show Bookmarks Bar
Expand All @@ -182,7 +182,7 @@
{/if}
</Menubar.CheckboxItem>
<Menubar.CheckboxItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
bind:checked={fullUrls}
>
Show Full URLs
Expand All @@ -197,39 +197,39 @@
</Menubar.CheckboxItem>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Reload</Menubar.Item
>
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Force Reload</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Toggle Fullscreen</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Hide Sidebar</Menubar.Item
>
</Menubar.Content>
</Menubar.Menu>
<Menubar.Menu>
<Menubar.Trigger
class="mr-[20px] inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium outline-none data-[highlighted]:bg-muted data-[state=open]:bg-muted"
class="mr-[20px] inline-flex h-10 cursor-default items-center justify-center rounded-[9px] px-3 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted data-[state=open]:bg-muted"
>Profiles</Menubar.Trigger
>
<Menubar.Content
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover outline-none"
class="z-50 w-full max-w-[220px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover"
transition={flyAndScale}
align="start"
sideOffset={3}
>
<Menubar.RadioGroup bind:value={profile}>
<Menubar.RadioItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
value="hunter"
>
Hunter
Expand All @@ -238,7 +238,7 @@
</Menubar.RadioIndicator>
</Menubar.RadioItem>
<Menubar.RadioItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
value="pavel"
>
Pavel
Expand All @@ -247,7 +247,7 @@
</Menubar.RadioIndicator>
</Menubar.RadioItem>
<Menubar.RadioItem
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
value="adrian"
>
Adrian
Expand All @@ -258,12 +258,12 @@
</Menubar.RadioGroup>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Edit...</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium outline-none data-[highlighted]:bg-muted"
class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
>Add Profile...</Menubar.Item
>
</Menubar.Content>
Expand Down

0 comments on commit 04afd24

Please sign in to comment.