mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 01:21:09 +02:00
feat(calendar): improve FAB positioning on mobile and subtle close styling
- Add hasFabRight prop to InputBar for mobile FAB spacing - InputBar leaves space for FAB on screens under 900px - Change active FAB style to subtle muted colors instead of bright blue - Support dark mode for active FAB state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
faa94129c5
commit
cc37db8072
3 changed files with 18 additions and 3 deletions
|
|
@ -207,12 +207,15 @@
|
|||
}
|
||||
|
||||
.toolbar-fab.active {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
:global(.dark) .toolbar-fab.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.toolbar-fab.active .fab-icon {
|
||||
color: white;
|
||||
color: hsl(var(--color-muted-foreground));
|
||||
}
|
||||
|
||||
.fab-icon {
|
||||
|
|
|
|||
|
|
@ -415,6 +415,7 @@
|
|||
: showCalendarToolbar && !isToolbarCollapsed
|
||||
? '140px'
|
||||
: '70px'}
|
||||
hasFabRight={showCalendarToolbar && !isSidebarMode}
|
||||
/>
|
||||
</div>
|
||||
</SplitPaneContainer>
|
||||
|
|
|
|||
|
|
@ -59,6 +59,8 @@
|
|||
autoFocus?: boolean;
|
||||
/** Bottom offset from viewport bottom (default: '70px') */
|
||||
bottomOffset?: string;
|
||||
/** Whether to leave space for a FAB button on the right side on mobile (default: false) */
|
||||
hasFabRight?: boolean;
|
||||
}
|
||||
|
||||
let {
|
||||
|
|
@ -75,6 +77,7 @@
|
|||
primaryColor = '#8b5cf6',
|
||||
autoFocus = true,
|
||||
bottomOffset = '70px',
|
||||
hasFabRight = false,
|
||||
}: Props = $props();
|
||||
|
||||
let searchQuery = $state('');
|
||||
|
|
@ -244,6 +247,7 @@
|
|||
|
||||
<div
|
||||
class="quick-input-bar"
|
||||
class:has-fab-right={hasFabRight}
|
||||
style="--primary-color: {primaryColor}; --bottom-offset: {bottomOffset}"
|
||||
>
|
||||
<!-- Results Panel (above input) -->
|
||||
|
|
@ -428,6 +432,13 @@
|
|||
transition: bottom 0.3s ease;
|
||||
}
|
||||
|
||||
/* Leave space for FAB on mobile */
|
||||
@media (max-width: 900px) {
|
||||
.quick-input-bar.has-fab-right {
|
||||
padding-right: calc(54px + 1rem + 0.75rem); /* FAB width + FAB right margin + gap */
|
||||
}
|
||||
}
|
||||
|
||||
.input-container,
|
||||
.results-panel,
|
||||
.submit-btn,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue