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: calc(var(--spacing) * 0);
}
.bottom-1 {
bottom: calc(var(--spacing) * 1);
}
.bottom-\[-1px\] {
bottom: -1px;
}
.grid-table-6 {
.grid-table-\[1fr_1fr_1fr_1fr_1fr_1fr\] {
&:is(table) {
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) {
grid-column-start: 1;
grid-column-end: -1;
@@ -334,12 +420,6 @@
.h-fit {
height: fit-content;
}
.max-h-\[10em\] {
max-height: 10em;
}
.max-h-\[50em\] {
max-height: 50em;
}
.max-h-\[50vh\] {
max-height: 50vh;
}
@@ -358,6 +438,9 @@
.w-full {
width: 100%;
}
.max-w-\[10px\] {
max-width: 10px;
}
.max-w-\[50\%\] {
max-width: 50%;
}
@@ -481,10 +564,6 @@
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
}
.border-dotted {
--tw-border-style: dotted;
border-style: dotted;
}
.border-solid {
--tw-border-style: solid;
border-style: solid;
@@ -516,9 +595,6 @@
.p-\[1em\] {
padding: 1em;
}
.px-\[1em\] {
padding-inline: 1em;
}
.px-\[2em\] {
padding-inline: 2em;
}
@@ -581,9 +657,6 @@
.underline {
text-decoration-line: underline;
}
.opacity-\[0\.8\] {
opacity: 0.8;
}
.outline-1 {
outline-style: var(--tw-outline-style);
outline-width: 1px;
@@ -604,26 +677,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.outline-solid {
--tw-outline-style: solid;
outline-style: solid;
}
.not-open\:mb-\[1em\] {
&:not(*:is([open], :popover-open, :open)) {
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 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
@@ -639,11 +697,6 @@
display: flex;
}
}
.details-content\:max-w-full {
&::details-content {
max-width: 100%;
}
}
.details-content\:transform-\[translate\(0px\,-2em\)\] {
&::details-content {
transform: translate(0px,-2em);
@@ -664,11 +717,6 @@
border-color: transparent;
}
}
.details-content\:p-\[1em\] {
&::details-content {
padding: 1em;
}
}
.details-content\:px-\[1em\] {
&::details-content {
padding-inline: 1em;
@@ -703,12 +751,6 @@
right: 0.5em;
}
}
.after\:float-right {
&::after {
content: var(--tw-content);
float: right;
}
}
.after\:text-\[2em\] {
&::after {
content: var(--tw-content);
@@ -735,14 +777,6 @@
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-\[\'-\'\] {
&:is(:where(.group\/sync-group):is([open], :popover-open, :open) *) {
&::after {
+1 -1
View File
@@ -1,7 +1,7 @@
@utility grid-table-* {
&:is(table) {
display: grid;
grid-template-columns: repeat(--value(integer), auto);
grid-template-columns: --value([*]);
& > :is(thead, tbody, tfoot) {
grid-column-start: 1;
@@ -10,7 +10,7 @@
class="
max-w-full overflow-x-auto
grid-table-6
grid-table-[1fr_1fr_1fr_1fr_1fr_1fr]
max-h-[50vh]
"
hx-get="{{ printf "/ui/accounts/%d/inventory/sync-groups/mock/draft/table" $acctID }}"