/* ============================================================================= Warp Navigation FileMaker-inspired navigation styles ============================================================================= */ /* ------------------------------------------------------------------------- Main App Layout ------------------------------------------------------------------------- */ .warp-app { display: flex; min-height: 100vh; background-color: var(--warp-color-app-bg); } .warp-app-content { flex: 1; display: flex; flex-direction: column; margin-left: var(--warp-sidebar-width); transition: margin-left var(--warp-transition-slow); } /* Collapsed state lives on so it persists across Turbo navigations (body gets replaced, never does) and can be applied synchronously from an inline script before first paint to avoid flicker. */ html.warp-sidebar-collapsed .warp-app-content { margin-left: var(--warp-sidebar-collapsed-width); } /* ------------------------------------------------------------------------- Application Bar (ZON 1) - Agera-style header ------------------------------------------------------------------------- */ .warp-app-bar { display: flex; align-items: center; height: var(--warp-header-height); padding: 0 var(--warp-spacing-4) 0 0; background-color: white; border-bottom: 1px solid var(--warp-color-gray-200); position: sticky; top: 0; z-index: var(--warp-z-sticky); transition: height var(--warp-transition-default); } /* Compact state when page has scrolled — toggled from JS */ .warp-app-bar.warp-app-bar--compact { height: var(--warp-header-height-compact); } .warp-app-bar-left { display: flex; align-items: center; gap: var(--warp-spacing-2-5); } .warp-app-bar-right { display: flex; align-items: center; gap: var(--warp-spacing-2-5); margin-left: auto; padding-right: 0; } /* Record count in app bar */ .warp-record-count { font-size: var(--warp-font-size-sm); color: var(--warp-color-gray-600); white-space: nowrap; & strong { color: var(--warp-color-gray-900); font-weight: var(--warp-font-weight-semibold); } } /* Record navigation buttons */ .warp-record-nav { display: flex; align-items: center; gap: var(--warp-spacing-1); margin-left: var(--warp-spacing-2); } .warp-btn-nav { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background-color: transparent; color: var(--warp-color-gray-500); border: none; border-radius: var(--warp-radius-default); cursor: pointer; transition: all var(--warp-transition-default); &:hover { background-color: var(--warp-color-gray-100); color: var(--warp-color-gray-700); } &:disabled { opacity: 0.3; cursor: not-allowed; } } /* Context buttons (Leverant, Inköp) */ .warp-btn-context { display: inline-flex; align-items: center; justify-content: center; gap: var(--warp-spacing-2); padding: var(--warp-spacing-1-5) var(--warp-spacing-3); font-size: var(--warp-font-size-sm); font-weight: var(--warp-font-weight-medium); color: var(--warp-color-gray-700); background-color: white; border: 1px solid var(--warp-color-gray-300); border-radius: var(--warp-radius-pill); cursor: pointer; transition: all var(--warp-transition-default); white-space: nowrap; &:hover { background-color: var(--warp-color-gray-50); border-color: var(--warp-color-gray-400); } } /* ------------------------------------------------------------------------- Module Tabs (ZON 2) - Agera-style view switcher ------------------------------------------------------------------------- */ .warp-module-tabs { display: flex; align-items: center; gap: var(--warp-spacing-2-5); height: var(--warp-module-tabs-height); padding: 0 var(--warp-spacing-4); background-color: white; border-bottom: 1px solid var(--warp-color-gray-200); position: sticky; top: var(--warp-header-height-current); z-index: var(--warp-z-sticky); transition: top var(--warp-transition-default); } .warp-module-tab { display: inline-flex; align-items: center; height: 100%; padding: 0 var(--warp-spacing-3); font-size: var(--warp-font-size-sm); font-weight: var(--warp-font-weight-medium); color: var(--warp-color-gray-600); text-decoration: none; background-color: transparent; border-radius: 0; position: relative; transition: color var(--warp-transition-default); &:hover:not(.warp-disabled):not(.warp-active) { color: var(--warp-color-gray-900); background-color: transparent; } &.warp-active { color: var(--warp-color-primary-500); background-color: transparent; } &.warp-active::after { content: ''; position: absolute; left: var(--warp-spacing-3); right: var(--warp-spacing-3); bottom: -1px; height: 3px; background-color: var(--warp-color-primary-500); border-radius: 2px 2px 0 0; } &.warp-active:hover { color: var(--warp-color-primary-400); background-color: transparent; } &.warp-disabled { color: var(--warp-color-gray-400); cursor: not-allowed; } } /* Navigation-variant for module-level links (Dashboard, Artikellista, etc). Distinct from content tabs by icon prefix and mutted default colour. */ .warp-module-tab--nav { color: var(--warp-color-gray-500); & i { margin-right: var(--warp-spacing-1-5); font-size: var(--warp-font-size-xs); color: var(--warp-color-gray-400); transition: color var(--warp-transition-default); } &:hover:not(.warp-active) i { color: var(--warp-color-gray-600); } &.warp-active i { color: inherit; } } /* Vertical divider between groups inside the module-tabs row */ .warp-module-tabs-divider { width: 1px; height: var(--warp-spacing-5); background-color: var(--warp-color-gray-300); align-self: center; margin: 0 var(--warp-spacing-2); } /* Legacy alias for backwards compatibility */ .warp-header { display: flex; align-items: center; height: var(--warp-header-height); padding: 0 var(--warp-spacing-4); background-color: white; border-bottom: 1px solid var(--warp-color-gray-200); position: sticky; top: 0; z-index: var(--warp-z-sticky); } .warp-header-left { display: flex; align-items: center; gap: var(--warp-spacing-3); } .warp-header-right { display: flex; align-items: center; gap: var(--warp-spacing-3); margin-left: auto; } /* Menu toggle button */ .warp-menu-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: var(--warp-color-primary-500); color: white; border: none; border-radius: 0 var(--warp-radius-pill) var(--warp-radius-pill) 0; cursor: pointer; transition: background-color var(--warp-transition-default); &:hover { background-color: var(--warp-color-primary-600); } } /* Page title in header */ .warp-page-title { display: flex; align-items: center; gap: var(--warp-spacing-2); font-size: var(--warp-font-size-lg); font-weight: var(--warp-font-weight-medium); color: var(--warp-color-gray-900); & .page-icon { color: var(--warp-color-gray-600); } } /* Header toolbar */ .warp-toolbar { display: flex; align-items: center; gap: var(--warp-spacing-2-5); margin-left: var(--warp-spacing-2-5); } .warp-toolbar-divider { width: 1px; height: 24px; background-color: var(--warp-color-gray-300); margin: 0 var(--warp-spacing-2); } /* ------------------------------------------------------------------------- Sidebar ------------------------------------------------------------------------- */ .warp-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--warp-sidebar-width); background-color: white; border-right: 1px solid var(--warp-color-gray-200); display: flex; flex-direction: column; z-index: var(--warp-z-fixed); transition: width 0.15s ease-out; overflow: hidden; } /* Collapsed state - narrower, hide text with overflow. Driven by html.warp-sidebar-collapsed (see .warp-app-content comment above). */ html.warp-sidebar-collapsed .warp-sidebar { width: var(--warp-sidebar-collapsed-width); } /* Hide text labels in collapsed state using opacity and width */ html.warp-sidebar-collapsed .warp-sidebar .warp-sidebar-brand span, html.warp-sidebar-collapsed .warp-sidebar .warp-nav-link span, html.warp-sidebar-collapsed .warp-sidebar .warp-sidebar-footer span { opacity: 0; width: 0; overflow: hidden; white-space: nowrap; transition: opacity 0.1s ease-out; } /* Hide section headers in collapsed - use visibility to keep space */ html.warp-sidebar-collapsed .warp-sidebar .warp-nav-header { opacity: 0; visibility: hidden; height: 0; padding: 0; margin: 0; } /* Hover expand - show everything, expand OVER content (not push) */ html.warp-sidebar-collapsed .warp-sidebar:hover { width: var(--warp-sidebar-width); box-shadow: var(--warp-shadow-xl); } html.warp-sidebar-collapsed .warp-sidebar:hover .warp-sidebar-brand span, html.warp-sidebar-collapsed .warp-sidebar:hover .warp-nav-link span, html.warp-sidebar-collapsed .warp-sidebar:hover .warp-sidebar-footer span { opacity: 1; width: auto; } html.warp-sidebar-collapsed .warp-sidebar:hover .warp-nav-header { opacity: 1; visibility: visible; height: auto; padding: var(--warp-spacing-3) var(--warp-spacing-4) var(--warp-spacing-2); } /* Sidebar brand/logo */ .warp-sidebar-brand { display: flex; align-items: center; padding: var(--warp-spacing-3) var(--warp-spacing-4); border-bottom: 1px solid var(--warp-color-gray-200); min-height: 56px; /* Fixed height to prevent jumping */ & a { display: flex; align-items: center; gap: var(--warp-spacing-2-5); text-decoration: none; color: var(--warp-color-gray-900); white-space: nowrap; overflow: hidden; } & .warp-brand-mark { height: 32px; width: 32px; flex-shrink: 0; display: block; } & .warp-brand-wordmark { display: flex; flex-direction: column; line-height: 1; transition: opacity 0.15s ease-out; } & .warp-brand-wordmark small { font-size: 10px; font-weight: var(--warp-font-weight-normal); color: var(--warp-color-gray-500); letter-spacing: 0.3px; margin-bottom: 2px; } & .warp-brand-wordmark strong { font-size: var(--warp-font-size-md); font-weight: var(--warp-font-weight-semibold); color: var(--warp-color-gray-900); letter-spacing: 0.2px; } } /* Navigation container */ .warp-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--warp-spacing-3) 0; } /* Navigation header (section title) */ .warp-nav-header { padding: var(--warp-spacing-3) var(--warp-spacing-4) var(--warp-spacing-2); font-size: var(--warp-font-size-xs); font-weight: var(--warp-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.5px; color: var(--warp-color-gray-500); white-space: nowrap; overflow: hidden; transition: opacity 0.15s ease-out; } /* Navigation link */ .warp-nav-link { display: flex; align-items: center; gap: var(--warp-spacing-3); padding: var(--warp-spacing-2) var(--warp-spacing-4); color: var(--warp-color-gray-700); text-decoration: none; font-size: var(--warp-font-size-sm); transition: background-color 0.15s ease-out, color 0.15s ease-out; white-space: nowrap; overflow: hidden; min-height: 40px; /* Fixed height prevents jumping */ & i, & svg { width: 20px; min-width: 20px; /* Prevent icon from shrinking */ text-align: center; color: var(--warp-color-gray-500); flex-shrink: 0; } & span { transition: opacity 0.15s ease-out; } &:hover:not(.warp-active) { background-color: var(--warp-color-gray-50); color: var(--warp-color-gray-900); } &.warp-active { background-color: var(--warp-color-primary-50); color: var(--warp-color-primary-600); & i, & svg { color: var(--warp-color-primary-500); } } &.warp-active:hover { background-color: var(--warp-color-primary-100); color: var(--warp-color-primary-700); & i, & svg { color: var(--warp-color-primary-600); } } } /* Submenu */ .warp-nav-submenu { padding-left: var(--warp-spacing-6); overflow: hidden; transition: max-height 0.2s ease-out, opacity 0.15s ease-out; max-height: 500px; /* Large enough for all items */ & .warp-nav-link { padding: var(--warp-spacing-1-5) var(--warp-spacing-4); font-size: var(--warp-font-size-xs); min-height: 32px; &::before { content: ''; width: 6px; height: 6px; border-radius: var(--warp-radius-full); background-color: var(--warp-color-gray-300); margin-right: var(--warp-spacing-2); flex-shrink: 0; } &.warp-active::before { background-color: var(--warp-color-primary-500); } } } /* Collapsed submenu - slide up */ html.warp-sidebar-collapsed .warp-sidebar .warp-nav-submenu { max-height: 0; opacity: 0; } html.warp-sidebar-collapsed .warp-sidebar:hover .warp-nav-submenu { max-height: 500px; opacity: 1; } /* Sidebar footer */ .warp-sidebar-footer { display: flex; flex-direction: column; gap: var(--warp-spacing-1); padding: var(--warp-spacing-3) var(--warp-spacing-4); border-top: 1px solid var(--warp-color-gray-200); font-size: var(--warp-font-size-xs); color: var(--warp-color-gray-500); white-space: nowrap; overflow: hidden; min-height: 44px; /* Fixed height */ & span { transition: opacity 0.15s ease-out; } } /* ------------------------------------------------------------------------- Breadcrumb ------------------------------------------------------------------------- */ .warp-breadcrumb { display: flex; align-items: center; gap: var(--warp-spacing-2); font-size: var(--warp-font-size-sm); color: var(--warp-color-gray-500); & a { color: var(--warp-color-gray-500); text-decoration: none; &:hover { color: var(--warp-color-gray-700); } } & .separator { color: var(--warp-color-gray-400); } & .current { color: var(--warp-color-gray-900); } } /* ------------------------------------------------------------------------- Edit Bar — sticky bottom bar shown while a record is in edit mode. Visibility toggled via body.warp-editing (see assets/js/edit-toggle.js). ------------------------------------------------------------------------- */ .warp-edit-bar { display: none; align-items: center; justify-content: space-between; gap: var(--warp-spacing-4); padding: var(--warp-spacing-3) var(--warp-spacing-5); background-color: var(--warp-color-success-50); color: var(--warp-color-success-700); border-bottom: 1px solid var(--warp-color-success-200); position: sticky; top: calc(var(--warp-header-height-current) + var(--warp-module-tabs-height)); z-index: var(--warp-z-sticky); transition: top var(--warp-transition-default); } body.warp-editing .warp-edit-bar { display: flex; } .warp-edit-bar-label { display: inline-flex; align-items: center; gap: var(--warp-spacing-2); font-size: var(--warp-font-size-sm); font-weight: var(--warp-font-weight-medium); & i { color: var(--warp-color-success-500); } } .warp-edit-bar-actions { display: inline-flex; align-items: center; gap: var(--warp-spacing-2); } /* When the edit bar is visible we rely on its Spara/Avbryt buttons — hide the duplicate toolbar buttons (still present in DOM as proxy targets). */ body.warp-editing [data-edit-toggle-save], body.warp-editing [data-edit-toggle-cancel] { display: none !important; } /* Hide the entire toolbar in edit mode — Ny / Redigera / Radera, record navigation and view actions (Sök/Urval/Skriv ut/Åtgärd) aren't meaningful while editing the current record. The edit-bar provides Spara/Avbryt. */ body.warp-editing .warp-toolbar { display: none !important; } /* ------------------------------------------------------------------------- Footer ------------------------------------------------------------------------- */ .warp-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--warp-spacing-3) var(--warp-spacing-4); background-color: white; border-top: 1px solid var(--warp-color-gray-200); font-size: var(--warp-font-size-xs); color: var(--warp-color-gray-500); } /* ------------------------------------------------------------------------- User/Account dropdown ------------------------------------------------------------------------- */ .warp-user-menu { position: relative; & .warp-user-toggle { display: flex; align-items: center; gap: var(--warp-spacing-2); padding: var(--warp-spacing-1-5) var(--warp-spacing-2); background: none; border: none; cursor: pointer; border-radius: var(--warp-radius-default); &:hover { background-color: var(--warp-color-gray-50); } } & .warp-user-dropdown { position: absolute; right: 0; top: 100%; min-width: 180px; background-color: white; border: 1px solid var(--warp-color-gray-200); border-radius: var(--warp-radius-md); box-shadow: var(--warp-shadow-lg); padding: var(--warp-spacing-1) 0; z-index: var(--warp-z-dropdown); display: none; &.warp-open { display: block; } & a { display: block; padding: var(--warp-spacing-2) var(--warp-spacing-3); color: var(--warp-color-gray-700); text-decoration: none; font-size: var(--warp-font-size-sm); &:hover { background-color: var(--warp-color-gray-50); } } & .divider { height: 1px; background-color: var(--warp-color-gray-200); margin: var(--warp-spacing-1) 0; } } } /* ------------------------------------------------------------------------- Language selector ------------------------------------------------------------------------- */ .warp-language-selector { & .warp-btn { display: flex; align-items: center; gap: var(--warp-spacing-2); } }