matteoscrugli
97494679ec
- Create MobileTitleBar component with fixed top position - Split title bar from tabs bar on mobile (title always on top) - Add data-has-actions attribute for action button detection - Track --tab-pill-height CSS variable for tab buttons - Remove extra padding from mobile content padding-top - Hide tabs container when no tabs or actions present 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
159 lines
3.8 KiB
CSS
159 lines
3.8 KiB
CSS
/* ==========================================
|
|
DIMENSIONS & SPACING
|
|
========================================== */
|
|
|
|
:root {
|
|
/* Spacing Scale (based on 0.25rem = 4px) */
|
|
--space-0: 0;
|
|
--space-1: 0.25rem;
|
|
/* 4px */
|
|
--space-2: 0.5rem;
|
|
/* 8px */
|
|
--space-3: 0.75rem;
|
|
/* 12px */
|
|
--space-4: 1rem;
|
|
/* 16px */
|
|
--space-5: 1.25rem;
|
|
/* 20px */
|
|
--space-6: 1.5rem;
|
|
/* 24px */
|
|
--space-8: 2rem;
|
|
/* 32px */
|
|
--space-10: 2.5rem;
|
|
/* 40px */
|
|
--space-12: 3rem;
|
|
/* 48px */
|
|
--space-16: 4rem;
|
|
/* 64px */
|
|
--space-20: 5rem;
|
|
/* 80px */
|
|
|
|
/* Border Radius - more modern, softer */
|
|
--radius-sm: 6px;
|
|
--radius-md: 10px;
|
|
--radius-lg: 12px;
|
|
--radius-xl: 20px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Component Heights */
|
|
--height-button: 36px;
|
|
--height-input: 40px;
|
|
--height-nav-item: 40px;
|
|
--height-header: 70px;
|
|
|
|
/* Sidebar Dimensions */
|
|
/* Sidebar is positioned at left: 0.75rem (12px) with these widths */
|
|
/* margin-left = left offset (12px) + sidebar width */
|
|
--sidebar-width: 272px;
|
|
/* 12px offset + 260px width */
|
|
--sidebar-width-collapsed: 92px;
|
|
/* 12px offset + 80px width */
|
|
--sidebar-mobile-width: 280px;
|
|
|
|
/* Page Layout Spacing */
|
|
--page-padding-x: 2.5rem;
|
|
/* Horizontal padding for page content */
|
|
--page-padding-y: 2.5rem;
|
|
/* Vertical padding for page content */
|
|
--page-padding-x-tablet: 2rem;
|
|
--page-padding-y-tablet: 2rem;
|
|
--page-padding-x-mobile: 1.25rem;
|
|
--page-padding-y-mobile: 1.25rem;
|
|
--page-max-width: 1200px;
|
|
/* Maximum content width */
|
|
--page-max-width-narrow: 800px;
|
|
/* Narrow content width */
|
|
|
|
/* Container Widths */
|
|
--container-sm: 640px;
|
|
--container-md: 768px;
|
|
--container-lg: 1024px;
|
|
--container-xl: 1280px;
|
|
|
|
/* Z-index Scale */
|
|
--z-dropdown: 100;
|
|
--z-sticky: 200;
|
|
--z-fixed: 300;
|
|
--z-modal-backdrop: 1000;
|
|
--z-modal: 1001;
|
|
--z-popover: 1002;
|
|
--z-tooltip: 1003;
|
|
|
|
/* Icon Sizes */
|
|
--icon-xs: 16px;
|
|
--icon-sm: 18px;
|
|
--icon-md: 20px;
|
|
--icon-lg: 24px;
|
|
--icon-xl: 32px;
|
|
|
|
/* Button Sizes */
|
|
--btn-padding-sm: 0.5rem 1rem;
|
|
--btn-padding-md: 0.625rem 1.25rem;
|
|
--btn-font-size: 0.95rem;
|
|
--btn-font-size-sm: 0.875rem;
|
|
--btn-height: 36px;
|
|
--btn-height-sm: 32px;
|
|
|
|
/* Icon Button Sizes */
|
|
--btn-icon-sm: 32px;
|
|
--btn-icon-md: 36px;
|
|
--btn-icon-lg: 48px;
|
|
|
|
/* Badge Sizes */
|
|
--badge-padding: 0.25rem 0.625rem;
|
|
--badge-font-size: 0.8rem;
|
|
|
|
/* Semantic Spacing - Cards & Containers - more breathing room */
|
|
--card-padding: 1.125rem;
|
|
/* increased for more space */
|
|
--card-padding-sm: 0.75rem;
|
|
--card-gap: 0.75rem;
|
|
--card-gap-lg: 1rem;
|
|
|
|
/* Semantic Spacing - Sections - 20% more space */
|
|
--section-gap: 1.5rem;
|
|
/* increased from 1.25rem */
|
|
--section-gap-sm: 1.125rem;
|
|
/* increased from 0.875rem */
|
|
--section-title-gap: var(--section-gap);
|
|
/* Title-to-content spacing for section headers */
|
|
|
|
/* Semantic Spacing - Elements */
|
|
--element-gap: 0.375rem;
|
|
/* Reduced from 0.5rem */
|
|
--element-gap-sm: 0.25rem;
|
|
/* Kept same */
|
|
--element-gap-lg: 0.625rem;
|
|
/* Reduced from 0.75rem */
|
|
|
|
/* Semantic Spacing - Toolbar & Header */
|
|
--toolbar-gap: 0.625rem;
|
|
/* Reduced from 0.75rem */
|
|
--toolbar-padding: 0.75rem;
|
|
/* Reduced from 1rem */
|
|
|
|
/* Semantic Spacing - Table */
|
|
--table-cell-padding: 0.625rem 0.875rem;
|
|
/* Reduced from 0.75rem 1rem */
|
|
--table-cell-padding-sm: 0.5rem 0.75rem;
|
|
/* Kept same */
|
|
|
|
/* Tab Sizes */
|
|
--tab-padding-y: 0.625rem;
|
|
--tab-padding-x: 1rem;
|
|
--tab-padding: var(--tab-padding-y) var(--tab-padding-x);
|
|
/* Reduced from 0.75rem 1.25rem */
|
|
--tab-font-size: 0.95rem;
|
|
--tab-pill-height: calc((var(--tab-font-size) * 1.2) + (var(--tab-padding-y) * 2));
|
|
|
|
/* Input Sizes */
|
|
--input-padding: 0.625rem 0.875rem;
|
|
/* Reduced from 0.75rem 1rem */
|
|
--input-font-size: 0.95rem;
|
|
|
|
/* Breakpoints (for reference in media queries) */
|
|
--breakpoint-mobile: 768px;
|
|
--breakpoint-tablet: 1024px;
|
|
--breakpoint-desktop: 1280px;
|
|
}
|