mirror of
https://github.com/filamentphp/filament.git
synced 2026-09-24 15:42:09 +08:00
oddvalueandDan Harrin
41a4e495d5
* Feat: Add streamlined option to table repeater * Feat: Replace streamlined table repeater option with compact alternative * Add padding to compact repeater infolist entries * clean up --------- Co-authored-by: Dan Harrin <git@danharrin.com>
366 lines
9.1 KiB
CSS
366 lines
9.1 KiB
CSS
.fi-fo-repeater {
|
|
@apply grid gap-y-4;
|
|
|
|
& .fi-fo-repeater-actions {
|
|
@apply flex gap-x-3;
|
|
|
|
&.fi-hidden {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
& .fi-fo-repeater-items {
|
|
@apply items-start gap-4;
|
|
}
|
|
|
|
& .fi-fo-repeater-item {
|
|
@apply rounded-xl bg-white shadow-xs ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
|
|
|
|
&.fi-collapsed {
|
|
& .fi-fo-repeater-item-header-collapsible-actions {
|
|
@apply -rotate-180;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-collapse-action {
|
|
@apply pointer-events-none opacity-0;
|
|
}
|
|
}
|
|
|
|
&:not(.fi-collapsed) {
|
|
& .fi-fo-repeater-item-header-expand-action {
|
|
@apply pointer-events-none opacity-0;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header {
|
|
@apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
|
|
}
|
|
|
|
&.fi-collapsible {
|
|
& .fi-fo-repeater-item-header {
|
|
@apply cursor-pointer select-none;
|
|
}
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-start-actions {
|
|
@apply flex items-center gap-x-3;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-icon {
|
|
@apply text-gray-400 dark:text-gray-500;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-label {
|
|
@apply text-sm font-medium text-gray-950 dark:text-white;
|
|
|
|
&.fi-truncated {
|
|
@apply truncate;
|
|
}
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-end-actions {
|
|
@apply ms-auto flex items-center gap-x-3;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-collapsible-actions {
|
|
@apply relative transition;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-collapse-action {
|
|
@apply transition;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-header-expand-action {
|
|
@apply absolute inset-0 rotate-180 transition;
|
|
}
|
|
|
|
& .fi-fo-repeater-item-content {
|
|
@apply border-t border-gray-100 p-4 dark:border-white/10;
|
|
}
|
|
|
|
& .fi-fo-repeater-add-between-items-ctn {
|
|
@apply flex w-full justify-center;
|
|
}
|
|
|
|
& .fi-fo-repeater-add-between-items {
|
|
@apply rounded-lg bg-white dark:bg-gray-900;
|
|
}
|
|
|
|
& .fi-fo-repeater-label-between-items-ctn {
|
|
@apply relative border-t border-gray-200 dark:border-white/10;
|
|
}
|
|
|
|
& .fi-fo-repeater-label-between-items {
|
|
@apply absolute start-3 -top-2.5 px-1 text-sm font-medium;
|
|
}
|
|
|
|
& .fi-fo-repeater-add {
|
|
@apply flex w-full justify-center;
|
|
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
@apply justify-start;
|
|
}
|
|
|
|
&.fi-align-end,
|
|
&.fi-align-right {
|
|
@apply justify-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fi-fo-simple-repeater {
|
|
@apply grid gap-y-4;
|
|
|
|
& .fi-fo-simple-repeater-items {
|
|
@apply gap-4;
|
|
}
|
|
|
|
& .fi-fo-simple-repeater-item {
|
|
@apply flex justify-start gap-x-3;
|
|
}
|
|
|
|
& .fi-fo-simple-repeater-item-content {
|
|
@apply flex-1;
|
|
}
|
|
|
|
& .fi-fo-simple-repeater-item-actions {
|
|
@apply flex items-center gap-x-1;
|
|
}
|
|
|
|
& .fi-fo-simple-repeater-add {
|
|
@apply flex w-full justify-center;
|
|
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
@apply justify-start;
|
|
}
|
|
|
|
&.fi-align-end,
|
|
&.fi-align-right {
|
|
@apply justify-end;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fi-fo-table-repeater {
|
|
@apply grid gap-3;
|
|
|
|
& > table {
|
|
@apply block w-full divide-y divide-gray-200 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10;
|
|
|
|
& > thead {
|
|
@apply hidden whitespace-nowrap;
|
|
|
|
& > tr {
|
|
& > th {
|
|
@apply border-gray-200 bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-950 first-of-type:rounded-tl-xl last-of-type:rounded-tr-xl dark:border-white/5 dark:bg-white/5 dark:text-white [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
|
|
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
@apply text-start;
|
|
}
|
|
|
|
&.fi-align-end,
|
|
&.fi-align-right {
|
|
@apply text-end;
|
|
}
|
|
|
|
&.fi-wrapped {
|
|
@apply whitespace-normal;
|
|
}
|
|
|
|
&:not(.fi-wrapped) {
|
|
@apply whitespace-nowrap;
|
|
}
|
|
|
|
&.fi-fo-table-repeater-empty-header-cell {
|
|
@apply w-1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& > tbody {
|
|
@apply block divide-y divide-gray-200 dark:divide-white/5;
|
|
|
|
& > tr {
|
|
@apply grid gap-6 p-6;
|
|
|
|
& > td {
|
|
@apply block;
|
|
|
|
&.fi-hidden {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-fo-table-repeater-header-required-mark {
|
|
@apply text-danger-600 dark:text-danger-400 font-medium;
|
|
}
|
|
|
|
& .fi-fo-table-repeater-actions {
|
|
@apply flex h-full items-center gap-x-3;
|
|
}
|
|
}
|
|
|
|
@supports (container-type: inline-size) {
|
|
@apply @container;
|
|
|
|
& > table {
|
|
@apply @xl:table;
|
|
|
|
& > thead {
|
|
@apply @xl:table-header-group;
|
|
}
|
|
|
|
& > tbody {
|
|
@apply @xl:table-row-group;
|
|
|
|
& > tr {
|
|
@apply @xl:table-row @xl:p-0;
|
|
|
|
& > td {
|
|
@apply @xl:table-cell @xl:px-3 @xl:py-2;
|
|
|
|
&.fi-hidden {
|
|
@apply @xl:table-cell;
|
|
}
|
|
|
|
& .fi-fo-field {
|
|
@apply @xl:gap-y-0;
|
|
}
|
|
|
|
& .fi-in-entry {
|
|
@apply @xl:gap-y-0;
|
|
}
|
|
|
|
& .fi-fo-field-label-content {
|
|
@apply @xl:hidden;
|
|
}
|
|
|
|
& .fi-in-entry-label {
|
|
@apply @xl:hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-fo-table-repeater-actions {
|
|
@apply @xl:px-3 @xl:py-2;
|
|
}
|
|
}
|
|
|
|
&.fi-compact {
|
|
& > table {
|
|
& > tbody {
|
|
& > tr {
|
|
& > td {
|
|
@apply @xl:border-gray-200 @xl:px-0 @xl:py-1 @xl:dark:border-white/5 @xl:[&:not(:first-of-type)]:border-s @xl:[&:not(:last-of-type)]:border-e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-input-wrp {
|
|
@apply @xl:bg-transparent! @xl:shadow-none @xl:ring-0!;
|
|
}
|
|
|
|
& .fi-fo-field-wrp-error-message {
|
|
@apply @xl:px-3 @xl:pb-2;
|
|
}
|
|
|
|
& .fi-in-entry-content {
|
|
@apply @xl:px-3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports not (container-type: inline-size) {
|
|
& > table {
|
|
@apply lg:table;
|
|
|
|
& > thead {
|
|
@apply lg:table-header-group;
|
|
}
|
|
|
|
& > tbody {
|
|
@apply lg:table-row-group;
|
|
|
|
& > tr {
|
|
@apply lg:table-row lg:p-0;
|
|
|
|
& > td {
|
|
@apply lg:table-cell lg:px-3 lg:py-2;
|
|
|
|
&.fi-hidden {
|
|
@apply lg:table-cell;
|
|
}
|
|
|
|
& .fi-fo-field {
|
|
@apply lg:gap-y-0;
|
|
}
|
|
|
|
& .fi-in-entry {
|
|
@apply lg:gap-y-0;
|
|
}
|
|
|
|
& .fi-fo-field-label-content {
|
|
@apply lg:hidden;
|
|
}
|
|
|
|
& .fi-in-entry-label {
|
|
@apply lg:hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-fo-table-repeater-actions {
|
|
@apply lg:px-3 lg:py-2;
|
|
}
|
|
}
|
|
|
|
&.fi-compact {
|
|
& > table {
|
|
& > tbody {
|
|
& > tr {
|
|
& > td {
|
|
@apply lg:border-gray-200 lg:px-0 lg:py-1 lg:dark:border-white/5 lg:[&:not(:first-of-type)]:border-s lg:[&:not(:last-of-type)]:border-e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-input-wrp {
|
|
@apply lg:bg-transparent! lg:shadow-none lg:ring-0!;
|
|
}
|
|
|
|
& .fi-fo-field-wrp-error-message {
|
|
@apply lg:px-3 lg:pb-2;
|
|
}
|
|
|
|
& .fi-in-entry-content {
|
|
@apply lg:px-3;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .fi-fo-table-repeater-add {
|
|
@apply flex w-full justify-center;
|
|
|
|
&.fi-align-start,
|
|
&.fi-align-left {
|
|
@apply justify-start;
|
|
}
|
|
|
|
&.fi-align-end,
|
|
&.fi-align-right {
|
|
@apply justify-end;
|
|
}
|
|
}
|
|
}
|