fixed mock sync group table styles

This commit is contained in:
2026-02-14 20:07:18 -07:00
parent b53fb18737
commit c0966ceeb4
4 changed files with 101 additions and 67 deletions
+97 -63
View File
@@ -197,16 +197,102 @@
.bottom-0 { .bottom-0 {
bottom: calc(var(--spacing) * 0); bottom: calc(var(--spacing) * 0);
} }
.bottom-1 { .grid-table-\[1fr_1fr_1fr_1fr_1fr_1fr\] {
bottom: calc(var(--spacing) * 1);
}
.bottom-\[-1px\] {
bottom: -1px;
}
.grid-table-6 {
&:is(table) { &:is(table) {
display: grid; display: grid;
grid-template-columns: repeat(6, auto); grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
& > :is(thead, tbody, tfoot) {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > tr {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > th, & > td {
grid-column: span 1;
align-content: center;
text-align: center;
}
}
}
}
}
.grid-table-\[minmax\(20vw\,80vw\)_1fr_1fr_1fr_1fr_1fr\] {
&:is(table) {
display: grid;
grid-template-columns: minmax(20vw,80vw) 1fr 1fr 1fr 1fr 1fr;
& > :is(thead, tbody, tfoot) {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > tr {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > th, & > td {
grid-column: span 1;
align-content: center;
text-align: center;
}
}
}
}
}
.grid-table-\[minmax\(20vw\,max-content\)_1fr_1fr_1fr_1fr_1fr\] {
&:is(table) {
display: grid;
grid-template-columns: minmax(20vw,max-content) 1fr 1fr 1fr 1fr 1fr;
& > :is(thead, tbody, tfoot) {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > tr {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > th, & > td {
grid-column: span 1;
align-content: center;
text-align: center;
}
}
}
}
}
.grid-table-\[minmax\(auto\,80vw\)_1fr_1fr_1fr_1fr_1fr\] {
&:is(table) {
display: grid;
grid-template-columns: minmax(auto,80vw) 1fr 1fr 1fr 1fr 1fr;
& > :is(thead, tbody, tfoot) {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > tr {
grid-column-start: 1;
grid-column-end: -1;
display: grid;
grid-template-columns: subgrid;
& > th, & > td {
grid-column: span 1;
align-content: center;
text-align: center;
}
}
}
}
}
.grid-table-\[minmax\(min-content\,80vw\)_1fr_1fr_1fr_1fr_1fr\] {
&:is(table) {
display: grid;
grid-template-columns: minmax(min-content,80vw) 1fr 1fr 1fr 1fr 1fr;
& > :is(thead, tbody, tfoot) { & > :is(thead, tbody, tfoot) {
grid-column-start: 1; grid-column-start: 1;
grid-column-end: -1; grid-column-end: -1;
@@ -334,12 +420,6 @@
.h-fit { .h-fit {
height: fit-content; height: fit-content;
} }
.max-h-\[10em\] {
max-height: 10em;
}
.max-h-\[50em\] {
max-height: 50em;
}
.max-h-\[50vh\] { .max-h-\[50vh\] {
max-height: 50vh; max-height: 50vh;
} }
@@ -358,6 +438,9 @@
.w-full { .w-full {
width: 100%; width: 100%;
} }
.max-w-\[10px\] {
max-width: 10px;
}
.max-w-\[50\%\] { .max-w-\[50\%\] {
max-width: 50%; max-width: 50%;
} }
@@ -481,10 +564,6 @@
border-bottom-style: var(--tw-border-style); border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px; border-bottom-width: 2px;
} }
.border-dotted {
--tw-border-style: dotted;
border-style: dotted;
}
.border-solid { .border-solid {
--tw-border-style: solid; --tw-border-style: solid;
border-style: solid; border-style: solid;
@@ -516,9 +595,6 @@
.p-\[1em\] { .p-\[1em\] {
padding: 1em; padding: 1em;
} }
.px-\[1em\] {
padding-inline: 1em;
}
.px-\[2em\] { .px-\[2em\] {
padding-inline: 2em; padding-inline: 2em;
} }
@@ -581,9 +657,6 @@
.underline { .underline {
text-decoration-line: underline; text-decoration-line: underline;
} }
.opacity-\[0\.8\] {
opacity: 0.8;
}
.outline-1 { .outline-1 {
outline-style: var(--tw-outline-style); outline-style: var(--tw-outline-style);
outline-width: 1px; outline-width: 1px;
@@ -604,26 +677,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration)); transition-duration: var(--tw-duration, var(--default-transition-duration));
} }
.outline-solid {
--tw-outline-style: solid;
outline-style: solid;
}
.not-open\:mb-\[1em\] { .not-open\:mb-\[1em\] {
&:not(*:is([open], :popover-open, :open)) { &:not(*:is([open], :popover-open, :open)) {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
.group-open\:border-b-\[0\.25rem\] {
&:is(:where(.group):is([open], :popover-open, :open) *) {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 0.25rem;
}
}
.group-open\:border-b-background {
&:is(:where(.group):is([open], :popover-open, :open) *) {
border-bottom-color: var(--background);
}
}
.group-hover\:scale-120 { .group-hover\:scale-120 {
&:is(:where(.group):hover *) { &:is(:where(.group):hover *) {
@media (hover: hover) { @media (hover: hover) {
@@ -639,11 +697,6 @@
display: flex; display: flex;
} }
} }
.details-content\:max-w-full {
&::details-content {
max-width: 100%;
}
}
.details-content\:transform-\[translate\(0px\,-2em\)\] { .details-content\:transform-\[translate\(0px\,-2em\)\] {
&::details-content { &::details-content {
transform: translate(0px,-2em); transform: translate(0px,-2em);
@@ -664,11 +717,6 @@
border-color: transparent; border-color: transparent;
} }
} }
.details-content\:p-\[1em\] {
&::details-content {
padding: 1em;
}
}
.details-content\:px-\[1em\] { .details-content\:px-\[1em\] {
&::details-content { &::details-content {
padding-inline: 1em; padding-inline: 1em;
@@ -703,12 +751,6 @@
right: 0.5em; right: 0.5em;
} }
} }
.after\:float-right {
&::after {
content: var(--tw-content);
float: right;
}
}
.after\:text-\[2em\] { .after\:text-\[2em\] {
&::after { &::after {
content: var(--tw-content); content: var(--tw-content);
@@ -735,14 +777,6 @@
content: var(--tw-content); content: var(--tw-content);
} }
} }
.group-open\:after\:content-\[\'-\'\] {
&:is(:where(.group):is([open], :popover-open, :open) *) {
&::after {
--tw-content: '-';
content: var(--tw-content);
}
}
}
.group-open\/sync-group\:after\:content-\[\'-\'\] { .group-open\/sync-group\:after\:content-\[\'-\'\] {
&:is(:where(.group\/sync-group):is([open], :popover-open, :open) *) { &:is(:where(.group\/sync-group):is([open], :popover-open, :open) *) {
&::after { &::after {
+1 -1
View File
@@ -1,7 +1,7 @@
@utility grid-table-* { @utility grid-table-* {
&:is(table) { &:is(table) {
display: grid; display: grid;
grid-template-columns: repeat(--value(integer), auto); grid-template-columns: --value([*]);
& > :is(thead, tbody, tfoot) { & > :is(thead, tbody, tfoot) {
grid-column-start: 1; grid-column-start: 1;
@@ -10,7 +10,7 @@
class=" class="
max-w-full overflow-x-auto max-w-full overflow-x-auto
grid-table-6 grid-table-[1fr_1fr_1fr_1fr_1fr_1fr]
max-h-[50vh] max-h-[50vh]
" "
hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/mock/draft/table" $acctID }}" hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/mock/draft/table" $acctID }}"