I can add multiple tabs

This commit is contained in:
2025-11-14 22:32:26 +01:00
parent 7ff8b3ea14
commit 93f6da66a5
9 changed files with 452 additions and 164 deletions

View File

@@ -1,3 +1,7 @@
:root {
--color-border-primary: color-mix(in oklab, var(--color-primary) 40%, #0000);
}
.mf-icon-20 {
width: 20px;
min-width: 20px;
@@ -14,6 +18,22 @@
margin-bottom: 4px;
}
.mf-icon-24 {
width: 24px;
min-width: 24px;
height: 24px;
margin-top: auto;
margin-bottom: 4px;
}
.mf-icon-32 {
width: 32px;
min-width: 32px;
height: 32px;
margin-top: auto;
margin-bottom: 4px;
}
/*
* MF Layout Component - CSS Grid Layout
* Provides fixed header/footer, collapsible drawers, and scrollable main content
@@ -81,13 +101,14 @@
/* Left drawer */
.mf-layout-left-drawer {
grid-area: left-drawer;
border-right: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
border-right: 1px solid var(--color-border-primary);
}
/* Right drawer */
.mf-layout-right-drawer {
grid-area: right-drawer;
border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
/*border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);*/
border-left: 1px solid var(--color-border-primary);
}
/* Collapsed drawer states */
@@ -171,11 +192,7 @@
grid-template-columns: 1fr;
}
/**
* Layout Drawer Resizer Styles
*
* Styles for the resizable drawer borders with visual feedback
*/
/**
* Layout Drawer Resizer Styles
*
@@ -296,8 +313,21 @@
.mf-tabs-header {
display: flex;
gap: 0;
flex-shrink: 0;
flex-shrink: 1;
min-height: 25px;
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
}
.mf-tabs-header-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
overflow: hidden; /* important */
}
/* Individual Tab Button using DaisyUI tab classes */
@@ -319,6 +349,7 @@
background-color: var(--color-base-100);
color: var(--color-base-content);
border-radius: .25rem;
border-bottom: 4px solid var(--color-primary);
box-shadow: 0 1px oklch(100% 0 0/calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
}
@@ -353,6 +384,7 @@
overflow: auto;
background-color: var(--color-base-100);
padding: 1rem;
border-top: 1px solid var(--color-border-primary);
}
/* Empty Content State */