michael/swift-duct-calc
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Updates sidebar to use the drawer classes from daisyui, currently doesn't open automatically on large screens like I want.

Browse Source
This commit is contained in:
Michael Housh
2026-01-08 12:40:05 -05:00
parent 79b7892d9a
commit 9356ccb1c9
12 changed files with 578 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
Public/css/output.css
View File

@@ -9,18 +9,15 @@
monospace;
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-black: #000;
--color-white: #fff;
--spacing: 0.25rem;
--text-xs: 0.75rem;
--text-xs--line-height: calc(1 / 0.75);
--text-sm: 0.875rem;
--text-sm--line-height: calc(1.25 / 0.875);
--text-lg: 1.125rem;
@@ -4225,21 +4222,12 @@
--toast-y: 0;
}
}
.top-0 {
top: calc(var(--spacing) * 0);
}
.top-2 {
top: calc(var(--spacing) * 2);
}
.right-2 {
right: calc(var(--spacing) * 2);
}
.right-4 {
right: calc(var(--spacing) * 4);
}
.right-6 {
right: calc(var(--spacing) * 6);
}
.dock-sm {
@layer daisyui.l1.l2 {
height: calc(0.25rem * 14);
@@ -4297,12 +4285,6 @@
}
}
}
.bottom-4 {
bottom: calc(var(--spacing) * 4);
}
.bottom-6 {
bottom: calc(var(--spacing) * 6);
}
.join {
display: inline-flex;
align-items: stretch;
@@ -5289,6 +5271,9 @@
.mx-2 {
margin-inline: calc(var(--spacing) * 2);
}
.mx-4 {
margin-inline: calc(var(--spacing) * 4);
}
.file-input-ghost {
@layer daisyui.l1.l2 {
background-color: transparent;
@@ -5375,6 +5360,9 @@
}
}
}
.my-1\.5 {
margin-block: calc(var(--spacing) * 1.5);
}
.my-2 {
margin-block: calc(var(--spacing) * 2);
}
@@ -6380,6 +6368,14 @@
height: var(--size);
}
}
.size-4 {
width: calc(var(--spacing) * 4);
height: calc(var(--spacing) * 4);
}
.size-7 {
width: calc(var(--spacing) * 7);
height: calc(var(--spacing) * 7);
}
.status-lg {
@layer daisyui.l1.l2 {
width: calc(0.25rem * 3);
@@ -6428,6 +6424,9 @@
.h-screen {
height: 100vh;
}
.min-h-full {
min-height: 100%;
}
.btn-wide {
@layer daisyui.l1.l2 {
width: 100%;
@@ -6559,18 +6558,15 @@
.w-full {
width: 100%;
}
.max-w-\[280px\] {
max-width: 280px;
}
.flex-none {
flex: none;
}
.flex-shrink {
flex-shrink: 1;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
.border-collapse {
border-collapse: collapse;
}
@@ -6755,14 +6751,11 @@
.flex-col {
flex-direction: column;
}
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
.items-start {
align-items: flex-start;
}
.justify-between {
justify-content: space-between;
@@ -7095,10 +7088,6 @@
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-r-2 {
border-right-style: var(--tw-border-style);
border-right-width: 2px;
}
.border-b {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
@@ -7375,6 +7364,12 @@
.bg-base-100 {
background-color: var(--color-base-100);
}
.bg-base-200 {
background-color: var(--color-base-200);
}
.bg-base-300 {
background-color: var(--color-base-300);
}
.bg-red-500 {
background-color: var(--color-red-500);
}
@@ -7666,9 +7661,6 @@
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.menu-title {
@layer daisyui.l1.l2.l3 {
padding-inline: calc(0.25rem * 3);
@@ -7792,21 +7784,12 @@
.px-4 {
padding-inline: calc(var(--spacing) * 4);
}
.px-6 {
padding-inline: calc(var(--spacing) * 6);
}
.py-1 {
padding-block: calc(var(--spacing) * 1);
}
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
.ps-2 {
padding-inline-start: calc(var(--spacing) * 2);
}
@@ -8457,6 +8440,9 @@
.text-gray-400 {
color: var(--color-gray-400);
}
.text-green-400 {
color: var(--color-green-400);
}
.text-info {
color: var(--color-info);
}
@@ -9348,13 +9334,6 @@
border-color: var(--color-red-500);
}
}
.hover\:bg-gray-300 {
&:hover {
@media (hover: hover) {
background-color: var(--color-gray-300);
}
}
}
.hover\:bg-red-600 {
&:hover {
@media (hover: hover) {
@@ -9362,13 +9341,6 @@
}
}
}
.hover\:text-gray-800 {
&:hover {
@media (hover: hover) {
color: var(--color-gray-800);
}
}
}
.focus\:outline {
&:focus {
outline-style: var(--tw-outline-style);
@@ -9385,14 +9357,9 @@
outline-color: var(--color-indigo-600);
}
}
.data-\[active\=true\]\:bg-gray-300 {
&[data-active="true"] {
background-color: var(--color-gray-300);
}
}
.data-\[active\=true\]\:text-gray-800 {
&[data-active="true"] {
color: var(--color-gray-800);
.md\:hidden {
@media (width >= 48rem) {
display: none;
}
}
.md\:grid-cols-2 {
@@ -9400,6 +9367,64 @@
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.lg\:drawer-open {
@media (width >= 64rem) {
@layer daisyui.l1.l2.l3 {
> .drawer-toggle:checked {
~ .drawer-side {
scrollbar-color: revert-layer;
}
:root:has(&) {
--page-overflow: revert-layer;
--page-scroll-gutter: revert-layer;
--page-scroll-bg: revert-layer;
--page-scroll-transition: revert-layer;
--page-has-backdrop: revert-layer;
animation: revert-layer;
animation-timeline: revert-layer;
}
}
}
@layer daisyui.l1.l2 {
> .drawer-side {
overflow-y: auto;
}
> .drawer-toggle {
display: none;
~ .drawer-side {
pointer-events: auto;
visibility: visible;
position: sticky;
display: block;
width: auto;
overscroll-behavior: auto;
opacity: 100%;
> .drawer-overlay {
cursor: default;
background-color: transparent;
}
}
&:checked ~ .drawer-side {
pointer-events: auto;
visibility: visible;
}
}
}
@layer daisyui.l1 {
> .drawer-toggle ~ .drawer-side > :not(.drawer-overlay) {
translate: 0%;
[dir="rtl"] & {
translate: 0%;
}
}
}
}
}
.lg\:hidden {
@media (width >= 64rem) {
display: none;
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -9410,6 +9435,149 @@
color: var(--color-white);
}
}
.is-drawer-close\:tooltip {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
@layer daisyui.l1.l2.l3 {
position: relative;
display: inline-block;
--tt-bg: var(--color-neutral);
--tt-off: calc(100% + 0.5rem);
--tt-tail: calc(100% + 1px + 0.25rem);
& > .tooltip-content, &[data-tip]:before {
position: absolute;
max-width: 20rem;
border-radius: var(--radius-field);
padding-inline: calc(0.25rem * 2);
padding-block: calc(0.25rem * 1);
text-align: center;
white-space: normal;
color: var(--color-neutral-content);
opacity: 0%;
font-size: 0.875rem;
line-height: 1.25;
background-color: var(--tt-bg);
width: max-content;
pointer-events: none;
z-index: 2;
--tw-content: attr(data-tip);
content: var(--tw-content);
}
&:after {
opacity: 0%;
background-color: var(--tt-bg);
content: "";
pointer-events: none;
width: 0.625rem;
height: 0.25rem;
display: block;
position: absolute;
mask-repeat: no-repeat;
mask-position: -1px 0;
--mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
mask-image: var(--mask-tooltip);
}
@media (prefers-reduced-motion: no-preference) {
& > .tooltip-content, &[data-tip]:before, &:after {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
}
}
&:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) {
&.tooltip-open, &:hover, &:has(:focus-visible) {
& > .tooltip-content, &[data-tip]:before, &:after {
opacity: 100%;
--tt-pos: 0rem;
@media (prefers-reduced-motion: no-preference) {
transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
}
}
}
}
@layer daisyui.l1.l2 {
> .tooltip-content, &[data-tip]:before {
transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
inset: auto auto var(--tt-off) 50%;
}
&:after {
transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
inset: auto auto var(--tt-tail) 50%;
}
}
}
}
.is-drawer-close\:tooltip-right {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
@layer daisyui.l1.l2 {
> .tooltip-content, &[data-tip]:before {
transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
inset: 50% auto auto var(--tt-off);
}
&:after {
transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
inset: 50% auto auto calc(var(--tt-tail) + 1px);
}
}
}
}
.is-drawer-close\:hidden {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
display: none;
}
}
.is-drawer-close\:w-14 {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
width: calc(var(--spacing) * 14);
}
}
.is-drawer-close\:min-w-\[80px\] {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
min-width: 80px;
}
}
.is-drawer-close\:items-center {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
align-items: center;
}
}
.is-drawer-close\:overflow-visible {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
overflow: visible;
}
}
.is-drawer-close\:text-error {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
color: var(--color-error);
}
}
.is-drawer-close\:text-green-400 {
&:where(.drawer-toggle:not(:checked) ~ .drawer-side, .drawer-toggle:not(:checked) ~ .drawer-side *) {
color: var(--color-green-400);
}
}
.is-drawer-open\:w-64 {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
width: calc(var(--spacing) * 64);
}
}
.is-drawer-open\:min-w-\[340px\] {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
min-width: 340px;
}
}
.is-drawer-open\:justify-between {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
justify-content: space-between;
}
}
.is-drawer-open\:space-x-4 {
&:where(.drawer-toggle:checked ~ .drawer-side, .drawer-toggle:checked ~ .drawer-side *) {
:where(& > :not(:last-child)) {
--tw-space-x-reverse: 0;
margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
}
}
}
}
@layer base {
:where(:root),:root:has(input.theme-controller[value=light]:checked),[data-theme=light] {