🆙 Add cms i using 🆙

This commit is contained in:
Remco
2025-11-25 22:42:56 +01:00
parent 94704e0925
commit d44196149e
35591 changed files with 3601123 additions and 0 deletions
@@ -0,0 +1,31 @@
.fi-ta-actions {
@apply flex max-w-full shrink-0 items-center justify-end gap-3;
& > * {
@apply shrink-0;
}
&.fi-wrapped {
@apply flex-wrap;
}
&.sm\:fi-not-wrapped {
@apply sm:flex-nowrap;
}
&.fi-align-center {
@apply justify-center;
}
&.fi-align-start {
@apply justify-start;
}
&.fi-align-between {
@apply justify-between;
}
&.md\:fi-align-end {
@apply md:justify-end;
}
}
@@ -0,0 +1,128 @@
.fi-ta-cell {
@apply p-0 first-of-type:ps-1 last-of-type:pe-1 sm:first-of-type:ps-3 sm:last-of-type:pe-3;
&.fi-vertical-align-start {
@apply align-top;
}
&.fi-vertical-align-end {
@apply align-bottom;
}
&.sm\:fi-hidden {
@apply sm:hidden;
}
&.md\:fi-hidden {
@apply md:hidden;
}
&.lg\:fi-hidden {
@apply lg:hidden;
}
&.xl\:fi-hidden {
@apply xl:hidden;
}
&.\32xl\:fi-hidden {
@apply 2xl:hidden;
}
&.sm\:fi-visible {
@apply hidden sm:table-cell;
}
&.md\:fi-visible {
@apply hidden md:table-cell;
}
&.lg\:fi-visible {
@apply hidden lg:table-cell;
}
&.xl\:fi-visible {
@apply hidden xl:table-cell;
}
&.\32xl\:fi-visible {
@apply hidden 2xl:table-cell;
}
& > .fi-ta-col {
@apply flex w-full justify-start text-start disabled:pointer-events-none;
}
&:has(.fi-ta-reorder-handle) {
@apply w-1 px-3 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
}
&:has(.fi-ta-actions) {
@apply px-3 py-4 whitespace-nowrap first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
}
&:has(.fi-ta-record-checkbox) {
@apply w-1 px-3 py-4 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
}
& .fi-ta-placeholder {
@apply text-sm leading-6 text-gray-400 dark:text-gray-500;
}
&.fi-ta-summary-row-heading-cell {
@apply px-3 py-4 text-sm font-medium text-gray-950 dark:text-white;
}
&.fi-align-start {
@apply text-start;
}
&.fi-align-center {
@apply text-center;
}
&.fi-align-end {
@apply text-end;
}
&.fi-align-left {
@apply text-left;
}
&.fi-align-right {
@apply text-right;
}
&.fi-align-justify,
&.fi-align-between {
@apply text-justify;
}
&.fi-ta-summary-header-cell {
@apply px-3 py-2 text-sm font-medium text-gray-950 sm:first-of-type:ps-6 dark:text-white;
&.fi-wrapped {
@apply whitespace-nowrap;
}
&:not(.fi-wrapped) {
@apply whitespace-nowrap;
}
}
&.fi-ta-individual-search-cell {
@apply min-w-48 px-3 py-2;
}
& .fi-ta-reorder-handle {
@apply cursor-move;
}
&.fi-ta-selection-cell {
@apply w-1 px-3 py-4 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
}
&.fi-ta-group-selection-cell {
@apply w-1 px-3 first-of-type:ps-4 last-of-type:pe-4 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
}
}
@@ -0,0 +1,43 @@
.fi-ta-col-manager {
@apply grid gap-y-4;
& .fi-ta-col-manager-ctn {
@apply grid gap-4;
}
& .fi-ta-col-manager-header {
@apply flex items-center justify-between;
}
& .fi-ta-col-manager-heading {
@apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
}
& .fi-ta-col-manager-items {
@apply -mt-6 gap-x-6;
}
& .fi-ta-col-manager-item {
@apply flex break-inside-avoid items-center gap-3 pt-6;
& .fi-ta-col-manager-label {
@apply flex w-full flex-1 items-center gap-x-3 text-sm font-medium text-gray-950 dark:text-white;
& .fi-checkbox-input {
@apply shrink-0;
}
}
& .fi-ta-col-manager-reorder-handle {
@apply cursor-move;
}
}
& .fi-ta-col-manager-group {
@apply break-inside-avoid;
& .fi-ta-col-manager-group-items {
@apply ps-8;
}
}
}
@@ -0,0 +1,16 @@
.fi-ta-checkbox {
@apply w-full;
&:not(.fi-inline) {
@apply px-3 py-4;
}
&.fi-align-center {
@apply text-center;
}
&.fi-align-end,
&.fi-align-right {
@apply text-end;
}
}
@@ -0,0 +1,38 @@
.fi-ta-color {
@apply flex w-full gap-1.5;
&.fi-wrapped {
@apply flex-wrap;
}
&:not(.fi-inline) {
@apply px-3 py-4;
}
&.fi-align-start,
&.fi-align-left {
@apply justify-start;
}
&.fi-align-center {
@apply justify-center;
}
&.fi-align-end,
&.fi-align-right {
@apply justify-end;
}
&.fi-align-justify,
&.fi-align-between {
@apply justify-between;
}
& > .fi-ta-color-item {
@apply size-6 rounded-md;
&.fi-copyable {
@apply cursor-pointer;
}
}
}
@@ -0,0 +1,42 @@
.fi-ta-icon {
@apply flex w-full gap-1.5;
&.fi-wrapped {
@apply flex-wrap;
}
&.fi-ta-icon-has-line-breaks {
@apply flex-col;
}
&:not(.fi-inline) {
@apply px-3 py-4;
}
&.fi-align-start,
&.fi-align-left {
@apply justify-start;
}
&.fi-align-center {
@apply justify-center;
}
&.fi-align-end,
&.fi-align-right {
@apply justify-end;
}
&.fi-align-justify,
&.fi-align-between {
@apply justify-between;
}
& > .fi-icon {
@apply text-gray-400 dark:text-gray-500;
&.fi-color {
@apply text-(--text) dark:text-(--dark-text);
}
}
}
@@ -0,0 +1,123 @@
.fi-ta-image {
@apply flex w-full items-center gap-1.5;
& img {
@apply max-w-none object-cover object-center;
}
&.fi-circular {
& img {
@apply rounded-full;
}
}
&.fi-ta-image-ring {
& img,
& .fi-ta-image-limited-remaining-text {
@apply ring ring-white dark:ring-gray-900;
}
&.fi-ta-image-ring-1 {
& img,
& .fi-ta-image-limited-remaining-text {
@apply ring-1;
}
}
&.fi-ta-image-ring-2 {
& img,
& .fi-ta-image-limited-remaining-text {
@apply ring-2;
}
}
&.fi-ta-image-ring-4 {
& img,
& .fi-ta-image-limited-remaining-text {
@apply ring-4;
}
}
}
&.fi-ta-image-overlap-1 {
@apply gap-x-0 -space-x-1;
}
&.fi-ta-image-overlap-2 {
@apply gap-x-0 -space-x-2;
}
&.fi-ta-image-overlap-3 {
@apply gap-x-0 -space-x-3;
}
&.fi-ta-image-overlap-4 {
@apply gap-x-0 -space-x-4;
}
&.fi-ta-image-overlap-5 {
@apply gap-x-0 -space-x-5;
}
&.fi-ta-image-overlap-6 {
@apply gap-x-0 -space-x-6;
}
&.fi-ta-image-overlap-7 {
@apply gap-x-0 -space-x-7;
}
&.fi-ta-image-overlap-8 {
@apply gap-x-0 -space-x-8;
}
&.fi-wrapped {
@apply flex-wrap;
}
&:not(.fi-inline) {
@apply px-3 py-4;
}
&.fi-align-start,
&.fi-align-left {
@apply justify-start;
}
&.fi-align-center {
@apply justify-center;
}
&.fi-align-end,
&.fi-align-right {
@apply justify-end;
}
&.fi-align-justify,
&.fi-align-between {
@apply justify-between;
}
&.fi-stacked {
& .fi-ta-image-limited-remaining-text {
@apply rounded-full bg-gray-100 dark:bg-gray-800;
}
}
& .fi-ta-image-limited-remaining-text {
@apply flex items-center justify-center text-sm font-medium text-gray-500 dark:text-gray-400;
&.fi-size-xs {
@apply text-xs;
}
&.fi-size-base,
&.fi-size-md {
@apply text-base;
}
&.fi-size-lg {
@apply text-lg;
}
}
}
@@ -0,0 +1,49 @@
.fi-ta-grid {
&.fi-gap-sm {
@apply gap-1;
}
&.sm\:fi-gap-sm {
@apply sm:gap-1;
}
&.md\:fi-gap-sm {
@apply md:gap-1;
}
&.lg\:fi-gap-sm {
@apply lg:gap-1;
}
&.xl\:fi-gap-sm {
@apply xl:gap-1;
}
&.\32xl\:fi-gap-sm {
@apply 2xl:gap-1;
}
&.fi-gap-lg {
@apply gap-3;
}
&.sm\:fi-gap-lg {
@apply sm:gap-3;
}
&.md\:fi-gap-lg {
@apply md:gap-3;
}
&.lg\:fi-gap-lg {
@apply lg:gap-3;
}
&.xl\:fi-gap-lg {
@apply xl:gap-3;
}
&.\32xl\:fi-gap-lg {
@apply 2xl:gap-3;
}
}
@@ -0,0 +1,3 @@
.fi-ta-panel {
@apply rounded-lg bg-gray-50 p-4 ring-1 ring-gray-950/5 ring-inset dark:bg-white/5 dark:ring-white/10;
}
@@ -0,0 +1,35 @@
.fi-ta-split {
@apply flex;
&.default\:fi-ta-split {
@apply items-center gap-3;
}
&.sm\:fi-ta-split,
&.md\:fi-ta-split,
&.lg\:fi-ta-split,
&.xl\:fi-ta-split,
&.\32xl\:fi-ta-split {
@apply flex-col gap-2;
}
&.sm\:fi-ta-split {
@apply sm:flex-row sm:items-center sm:gap-3;
}
&.md\:fi-ta-split {
@apply md:flex-row md:items-center md:gap-3;
}
&.lg\:fi-ta-split {
@apply lg:flex-row lg:items-center lg:gap-3;
}
&.xl\:fi-ta-split {
@apply xl:flex-row xl:items-center xl:gap-3;
}
&.\32xl\:fi-ta-split {
@apply 2xl:flex-row 2xl:items-center 2xl:gap-3;
}
}
@@ -0,0 +1,29 @@
.fi-ta-stack {
@apply flex flex-col;
&.fi-align-start,
&.fi-align-left {
@apply items-start;
}
&.fi-align-center {
@apply items-center;
}
&.fi-align-end,
&.fi-align-right {
@apply items-end;
}
&.fi-gap-sm {
@apply space-y-1;
}
&.fi-gap-md {
@apply space-y-2;
}
&.fi-gap-lg {
@apply space-y-3;
}
}
@@ -0,0 +1,7 @@
.fi-ta-select {
@apply w-full min-w-48;
&:not(.fi-inline) {
@apply px-3 py-4;
}
}
@@ -0,0 +1,23 @@
.fi-ta-icon-count-summary {
@apply grid gap-y-1.5 px-3 py-4 text-sm text-gray-500 dark:text-gray-400;
& > .fi-ta-icon-count-summary-label {
@apply font-medium text-gray-950 dark:text-white;
}
& > ul {
@apply grid gap-y-1.5;
& > li {
@apply flex items-center justify-end gap-x-1.5;
& > .fi-icon {
@apply text-gray-400 dark:text-gray-500;
&.fi-color {
@apply text-(--text) dark:text-(--dark-text);
}
}
}
}
}
@@ -0,0 +1,7 @@
.fi-ta-range-summary {
@apply grid gap-y-1 px-3 py-4 text-sm text-gray-500 dark:text-gray-400;
& > .fi-ta-range-summary-label {
@apply font-medium text-gray-950 dark:text-white;
}
}
@@ -0,0 +1,7 @@
.fi-ta-text-summary {
@apply grid gap-y-1 px-3 py-4 text-sm text-gray-500 dark:text-gray-400;
& > .fi-ta-text-summary-label {
@apply font-medium text-gray-950 dark:text-white;
}
}
@@ -0,0 +1,13 @@
.fi-ta-values-summary {
@apply grid gap-y-1 px-3 py-4 text-sm text-gray-500 dark:text-gray-400;
& > .fi-ta-values-summary-label {
@apply font-medium text-gray-950 dark:text-white;
}
& > ul {
&.fi-bulleted {
@apply list-inside list-disc;
}
}
}
@@ -0,0 +1,7 @@
.fi-ta-text-input {
@apply w-full min-w-48;
&:not(.fi-inline) {
@apply px-3 py-4;
}
}
@@ -0,0 +1,244 @@
.fi-ta-text {
@apply w-full;
&.fi-ta-text-has-descriptions,
&.fi-ta-text-list-limited {
/* Add space between content and descriptions / list limit message. */
@apply flex flex-col;
&.fi-ta-text-has-badges {
/* When the content contains badges, more gap is required to balance the spacing. */
@apply gap-y-2;
}
&:not(.fi-ta-text-has-badges) {
/* When the content does not contain badges, less gap is required to balance the spacing. */
@apply gap-y-1;
}
}
&:not(.fi-inline) {
@apply px-3 py-4;
}
ul&.fi-bulleted,
&.fi-bulleted ul {
@apply list-inside list-disc;
}
&:not(.fi-ta-text-has-line-breaks) {
ul&.fi-ta-text-has-badges,
&.fi-ta-text-has-badges ul {
/* A list of badges without line breaks need to remain on the same line, not wrap */
@apply flex gap-x-1.5;
&.fi-wrapped,
&:is(.fi-wrapped ul) {
/* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
@apply flex-wrap gap-y-1;
}
}
}
ul&.fi-ta-text-has-badges,
&.fi-ta-text-has-badges ul {
&.fi-ta-text-has-line-breaks,
&:is(.fi-ta-text-has-line-breaks ul) {
/* Add vertical gap between badges in a list with line breaks */
@apply flex flex-col gap-y-1;
}
&:not(ul.fi-ta-text-has-line-breaks),
&:not(.fi-ta-text-has-line-breaks ul) {
/* A list of badges without line breaks need to remain on the same line, not wrap */
@apply flex gap-x-1.5;
&.fi-wrapped,
&:is(.fi-wrapped ul) {
/* When wrap is enabled, some badges can remain on the same line as others and some should wrap */
@apply flex-wrap gap-y-1;
}
}
}
&.fi-wrapped:not(.fi-ta-text-has-badges.fi-ta-text-has-line-breaks) {
/* If the content has badges, and they have line breaks, setting `whitespace-normal` sometimes pushes the badge
onto the line below the bullet point if there is one, and badge content does not need to wrap anyway. */
@apply whitespace-normal;
& .fi-badge,
& .fi-ta-text-list-limited-message {
/* Badge content should not wrap, but descriptions above and below badges should. The list limited
message and actions should not wrap. */
@apply whitespace-nowrap;
}
}
& > .fi-ta-text-description,
& > .fi-ta-text-list-limited-message {
@apply text-sm text-gray-500 dark:text-gray-400;
}
&.fi-align-center {
@apply text-center;
ul&,
& ul {
@apply justify-center;
}
}
&.fi-align-end,
&.fi-align-right {
@apply text-end;
ul&,
& ul {
@apply justify-end;
}
}
&.fi-align-justify,
&.fi-align-between {
@apply text-justify;
ul&,
& ul {
@apply justify-between;
}
}
}
.fi-ta-text-item {
@apply text-gray-950 dark:text-white;
& a {
@apply hover:underline focus-visible:underline;
}
&:not(.fi-bulleted li.fi-ta-text-item) {
/* Line clamping sets the `display` property of the list item to `-webkit-box` instead of `list-item`, which hides the bullet point. */
@apply line-clamp-(--line-clamp,none);
}
& > .fi-copyable {
@apply cursor-pointer;
}
&.fi-size-xs {
@apply text-xs;
}
&.fi-size-sm {
@apply text-sm leading-6;
}
&.fi-size-md {
@apply text-base;
}
&.fi-size-lg {
@apply text-lg;
}
&.fi-font-thin {
@apply font-thin;
}
&.fi-font-extralight {
@apply font-extralight;
}
&.fi-font-light {
@apply font-light;
}
&.fi-font-normal {
@apply font-normal;
}
&.fi-font-medium {
@apply font-medium;
}
&.fi-font-semibold {
@apply font-semibold;
}
&.fi-font-bold {
@apply font-bold;
}
&.fi-font-extrabold {
@apply font-extrabold;
}
&.fi-font-black {
@apply font-black;
}
&.fi-font-sans {
@apply font-sans;
}
&.fi-font-serif {
@apply font-serif;
}
&.fi-font-mono {
@apply font-mono;
}
&.fi-color {
@apply text-(--text) dark:text-(--dark-text);
li&::marker {
@apply text-gray-950;
}
@variant dark {
li&::marker {
@apply text-white;
}
}
}
&.fi-color-gray {
@apply text-gray-500 dark:text-gray-400;
li&::marker {
@apply text-gray-950;
}
@variant dark {
li&::marker {
@apply text-white;
}
}
}
& > .fi-icon,
& > span:not(.fi-badge) > .fi-icon {
@apply inline-block shrink-0 text-gray-400 dark:text-gray-500;
&.fi-color {
@apply text-color-500;
}
}
&.fi-ta-text-has-badges > .fi-badge {
@apply align-middle;
}
}
.fi-ta-col-has-column-url .fi-ta-text-item {
@apply hover:underline focus-visible:underline;
& .fi-icon {
@apply hover:no-underline focus-visible:no-underline;
}
& > .fi-badge {
@apply hover:no-underline focus-visible:no-underline;
}
}
@@ -0,0 +1,16 @@
.fi-ta-toggle {
@apply w-full;
&:not(.fi-inline) {
@apply px-3 py-4;
}
&.fi-align-center {
@apply text-center;
}
&.fi-align-end,
&.fi-align-right {
@apply text-end;
}
}
@@ -0,0 +1,272 @@
.fi-ta-ctn {
@apply relative flex rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
&:not(.fi-ta-ctn-with-header) {
@apply overflow-hidden;
}
&.fi-loading {
@apply animate-pulse;
}
& .fi-ta-header-ctn {
@apply -mt-px;
}
& .fi-ta-header {
@apply flex flex-col gap-3 border-b border-gray-200 p-4 sm:px-6 dark:border-white/10;
&.fi-ta-header-adaptive-actions-position {
@apply sm:flex-row sm:items-center;
& .fi-ta-actions {
@apply sm:ms-auto;
}
&:not(:has(.fi-ta-header-heading)) {
&:not(:has(.fi-ta-header-description)) {
& .fi-ta-actions {
@apply ms-auto;
}
}
}
}
& .fi-ta-header-heading {
@apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
}
& .fi-ta-header-description {
@apply mt-1 text-sm text-gray-600 dark:text-gray-400;
}
}
& .fi-ta-header-toolbar {
@apply flex flex-wrap items-center justify-between gap-4 border-b border-gray-200 px-4 py-3 sm:px-6 dark:border-white/10;
& > * {
@apply flex items-center gap-x-4;
}
& > :nth-child(1) {
@apply shrink-0;
}
& > :nth-child(2) {
@apply ms-auto;
}
& .fi-ta-grouping-settings {
& .fi-dropdown {
&.sm\:fi-hidden {
@apply sm:hidden;
}
& .fi-ta-grouping-settings-fields {
@apply grid gap-y-6 p-6;
& label {
@apply grid gap-y-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
}
}
}
& > .fi-ta-grouping-settings-fields {
@apply hidden items-center gap-x-3 sm:flex;
}
}
& .fi-ta-filters-dropdown {
& .fi-ta-filters {
@apply p-6;
}
}
& .fi-ta-col-manager-dropdown {
& .fi-ta-col-manager {
@apply p-6;
}
}
}
& .fi-ta-filters {
@apply grid gap-y-4;
&.fi-ta-filters-below-content {
@apply border-t border-gray-200 p-4 sm:px-6 dark:border-white/10;
}
& .fi-ta-filters-header {
@apply flex items-center justify-between;
& .fi-ta-filters-heading {
@apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
}
& .fi-loading-indicator {
@apply text-gray-400 dark:text-gray-500;
}
}
}
& .fi-ta-filters-above-content-ctn {
@apply grid border-b border-gray-200 px-4 py-4 sm:px-6 dark:border-white/10;
& .fi-ta-filters-trigger-action-ctn {
@apply ms-auto;
}
&.fi-open {
& .fi-ta-filters-trigger-action-ctn {
@apply mt-3;
}
&:has(.fi-ta-filters-apply-action-ctn) {
& .fi-ta-filters-trigger-action-ctn {
@apply -mt-7;
}
}
}
}
& .fi-ta-reorder-indicator {
@apply flex items-center gap-x-3 border-b border-gray-200 bg-gray-50 px-3 py-1.5 text-sm leading-6 font-medium text-gray-700 sm:px-6 dark:border-white/10 dark:bg-white/5 dark:text-gray-200;
& .fi-loading-indicator {
@apply text-gray-400 dark:text-gray-500;
}
}
& .fi-ta-selection-indicator {
@apply flex flex-col justify-between gap-y-1 border-b border-gray-200 bg-gray-50 px-3 py-2 sm:flex-row sm:items-center sm:px-6 sm:py-1.5 dark:border-white/10 dark:bg-white/5;
& .fi-loading-indicator {
@apply text-gray-400 dark:text-gray-500;
}
& .fi-ta-selection-indicator-actions-ctn {
@apply flex gap-x-3;
}
& > * {
@apply flex gap-x-3;
}
& > :nth-child(1) {
@apply text-sm leading-6 font-medium text-gray-700 dark:text-gray-200;
}
& > :nth-child(2) {
@apply ms-auto;
}
}
& .fi-ta-filter-indicators {
@apply flex items-start justify-between gap-x-3 border-b border-gray-200 bg-gray-50 px-3 py-1.5 sm:px-6 dark:border-white/10 dark:bg-white/5;
& > :nth-child(1) {
@apply flex flex-col gap-x-3 gap-y-1 sm:flex-row;
& .fi-ta-filter-indicators-label {
@apply text-sm leading-6 font-medium whitespace-nowrap text-gray-700 dark:text-gray-200;
}
& .fi-ta-filter-indicators-badges-ctn {
@apply flex flex-wrap gap-1.5;
}
}
& > :nth-child(2).fi-icon-btn {
@apply -mt-1;
}
}
& .fi-pagination {
@apply border-t border-gray-200 px-3 py-3 sm:px-6 dark:border-white/10;
}
& .fi-ta-table-loading-ctn {
@apply flex h-32 items-center justify-center;
}
& .fi-ta-main {
@apply min-w-0 flex-1;
}
& .fi-ta-filters-trigger-action-ctn.lg\:fi-hidden {
@apply lg:hidden;
}
& .fi-ta-filters-before-content-ctn,
& .fi-ta-filters-after-content-ctn {
@apply absolute z-20 hidden w-screen max-w-[14rem]! shrink-0 rounded-lg border-gray-200 bg-white shadow-lg ring-1 ring-gray-950/5 transition lg:static lg:z-auto lg:shadow-none lg:ring-0 dark:border-white/10 dark:bg-gray-900 dark:ring-white/10;
& .fi-ta-filters {
@apply p-6 lg:py-4;
}
&.fi-open {
@apply block;
}
&.lg\:fi-open {
@apply lg:block;
}
&.fi-opacity-0 {
@apply opacity-0;
}
&.fi-width-xs {
@apply max-w-xs!;
}
&.fi-width-sm {
@apply max-w-sm!;
}
&.fi-width-md {
@apply max-w-md!;
}
&.fi-width-lg {
@apply max-w-lg!;
}
&.fi-width-xl {
@apply max-w-xl!;
}
&.fi-width-2xl {
@apply max-w-2xl!;
}
&.fi-width-3xl {
@apply max-w-3xl!;
}
&.fi-width-4xl {
@apply max-w-4xl!;
}
&.fi-width-5xl {
@apply max-w-5xl!;
}
&.fi-width-6xl {
@apply max-w-6xl!;
}
&.fi-width-7xl {
@apply max-w-7xl!;
}
}
& .fi-ta-filters-before-content-ctn {
@apply start-0 lg:rounded-s-xl lg:rounded-e-none lg:border-e;
}
& .fi-ta-filters-after-content-ctn {
@apply end-0 lg:rounded-s-none lg:rounded-e-xl lg:border-s;
}
}
@@ -0,0 +1,333 @@
.fi-ta-content-ctn {
@apply relative divide-y divide-gray-200 overflow-x-auto dark:divide-white/10 dark:border-t-white/10;
& .fi-ta-content-header {
@apply flex items-center gap-4 gap-x-6 bg-gray-50 px-4 sm:px-6 dark:bg-white/5;
& .fi-ta-page-checkbox {
@apply my-4 shrink-0;
}
& .fi-ta-sorting-settings {
@apply flex gap-x-3 py-3;
}
}
&:not(.fi-ta-ctn-with-footer .fi-ta-content-ctn) {
@apply rounded-b-xl;
}
&:not(.fi-ta-ctn-with-header .fi-ta-content-ctn) {
@apply border-t-0;
}
& .fi-ta-content {
@apply grid;
&.fi-ta-content-grid {
@apply gap-4 p-4 sm:px-6;
&.fi-ta-content-grouped {
@apply pt-0;
}
& .fi-ta-group-header {
@apply -mx-4 border-y border-gray-200 first:border-t-0 sm:-mx-6 dark:border-white/5;
width: calc(100% + 2rem);
@variant sm {
width: calc(100% + 3rem);
}
}
& .fi-ta-record {
@apply rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
&.fi-clickable {
@apply dark:hover:bg-white/10 dark:hover:ring-white/20;
}
&.fi-selected {
@apply dark:bg-white/10 dark:ring-white/20;
}
&:not(.fi-selected) {
@apply bg-white dark:bg-white/5 dark:ring-white/10;
}
&.fi-ta-record-with-content-prefix {
& .fi-ta-record-content {
@apply ps-2;
}
& .fi-ta-actions {
@apply ps-2;
}
}
&.fi-ta-record-with-content-suffix {
& .fi-ta-record-content {
@apply pe-2;
}
& .fi-ta-actions {
@apply pe-2;
}
}
}
}
&:not(.fi-ta-content-grid) {
@apply gap-y-px bg-gray-200 dark:bg-white/5;
& .fi-ta-record {
&.fi-clickable {
@apply dark:hover:bg-white/5;
}
&.fi-selected {
@apply before:bg-primary-600 dark:before:bg-primary-500 before:absolute before:inset-y-0 before:start-0 before:w-0.5 dark:bg-white/5;
}
& .fi-ta-record-content-ctn {
@apply md:flex-row md:items-center;
}
&:not(.fi-ta-record-with-content-prefix) {
& .fi-ta-record-content {
@apply sm:ps-6;
}
& .fi-ta-actions {
@apply sm:ps-6;
}
}
&:not(.fi-ta-record-with-content-suffix) {
& .fi-ta-record-content {
@apply sm:pe-6;
}
& .fi-ta-actions {
@apply sm:pe-6;
}
}
&.fi-ta-record-with-content-prefix {
@apply sm:ps-3;
& .fi-ta-record-content {
@apply ps-3;
}
& .fi-ta-actions {
@apply ps-3;
}
}
&.fi-ta-record-with-content-suffix {
@apply sm:pe-3;
& .fi-ta-record-content {
@apply pe-3;
}
& .fi-ta-actions {
@apply pe-3;
}
}
& .fi-ta-actions {
@apply md:ps-3;
}
}
}
& .fi-ta-group-header {
@apply col-span-full flex w-full items-center gap-x-3 bg-gray-50 px-1 py-2 sm:px-3 dark:bg-white/5;
&.fi-collapsible {
@apply cursor-pointer;
&.fi-collapsed {
& .fi-icon-btn {
@apply -rotate-180;
}
}
}
& .fi-ta-group-heading {
@apply text-sm font-medium text-gray-950 dark:text-white;
}
& .fi-ta-group-description {
@apply text-sm text-gray-500 dark:text-gray-400;
}
& .fi-ta-group-checkbox {
@apply mx-3;
}
}
& .fi-ta-table {
@apply col-span-full;
}
& .fi-ta-record {
@apply relative flex h-full items-center bg-white transition duration-75 dark:bg-gray-900;
&.fi-ta-record-with-content-prefix {
@apply ps-1;
}
&.fi-ta-record-with-content-suffix {
@apply pe-1;
}
&.fi-clickable {
@apply hover:bg-gray-50;
}
&.fi-collapsed {
@apply hidden;
}
&.fi-selected {
@apply bg-gray-50;
}
& .fi-ta-reorder-handle {
@apply mx-1 my-2;
}
& .fi-ta-record-checkbox {
@apply mx-3 my-4 shrink-0;
}
& .fi-ta-record-content-ctn {
@apply flex h-full w-full flex-col gap-y-3 py-4;
& > :nth-child(1) {
@apply flex-1;
}
& .fi-ta-record-content {
@apply block w-full;
& .fi-ta-col {
@apply flex justify-start text-start disabled:pointer-events-none;
&.fi-growable {
@apply w-full;
}
&.fi-align-center {
@apply justify-center text-center;
}
&.fi-align-end {
@apply justify-end text-end;
}
&.fi-align-left {
@apply justify-start text-left;
}
&.fi-align-right {
@apply justify-end text-right;
}
&.fi-align-justify,
&.fi-align-between {
@apply justify-between text-justify;
}
}
&.fi-collapsible {
@apply mt-3;
}
& .fi-growable {
@apply w-full flex-1;
}
& .sm\:fi-hidden {
@apply sm:hidden;
}
& .md\:fi-hidden {
@apply md:hidden;
}
& .lg\:fi-hidden {
@apply lg:hidden;
}
& .xl\:fi-hidden {
@apply xl:hidden;
}
& .\32xl\:fi-hidden {
@apply 2xl:hidden;
}
& .sm\:fi-visible {
@apply hidden sm:block;
}
& .md\:fi-visible {
@apply hidden md:block;
}
& .lg\:fi-visible {
@apply hidden lg:block;
}
& .xl\:fi-visible {
@apply hidden xl:block;
}
& .\32xl\:fi-visible {
@apply hidden 2xl:block;
}
}
}
& .fi-ta-record-collapse-btn {
@apply mx-1 my-2 shrink-0;
}
& .fi-ta-actions {
&.fi-ta-actions-before-columns-position {
@apply order-first;
}
}
&:not(.fi-ta-record-with-content-prefix) {
& .fi-ta-record-content {
@apply ps-4;
}
& .fi-ta-actions {
@apply ps-4;
}
}
&:not(.fi-ta-record-with-content-suffix) {
& .fi-ta-record-content {
@apply pe-4;
}
& .fi-ta-actions {
@apply pe-4;
}
}
&.fi-ta-record-collapsed {
& .fi-ta-record-collapse-btn {
@apply rotate-180;
}
}
}
}
}
@@ -0,0 +1,31 @@
.fi-ta-empty-state {
@apply px-6 py-12;
&:not(.fi-ta-ctn-with-content-layout .fi-ta-empty-state) {
@apply border-t border-gray-200 dark:border-white/10;
}
& .fi-ta-empty-state-content {
@apply mx-auto grid max-w-lg justify-items-center text-center;
}
& .fi-ta-empty-state-icon-bg {
@apply mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20;
& .fi-icon {
@apply text-gray-500 dark:text-gray-400;
}
}
& .fi-ta-empty-state-heading {
@apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
}
& .fi-ta-empty-state-description {
@apply mt-1 text-sm text-gray-500 dark:text-gray-400;
}
& .fi-ta-actions {
@apply mt-6;
}
}
@@ -0,0 +1,213 @@
.fi-ta-header-cell {
@apply px-3 py-3.5 text-start text-sm font-semibold text-gray-950 sm:first-of-type:ps-6 sm:last-of-type:pe-6 dark:text-white;
&.fi-growable {
@apply w-full;
}
&.fi-grouped {
@apply border-gray-200 dark:border-white/5 [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
}
&.fi-align-center {
@apply text-center;
& .fi-ta-header-cell-sort-btn {
@apply justify-center;
}
}
&.fi-align-end {
@apply text-end;
& .fi-ta-header-cell-sort-btn {
@apply justify-end;
}
}
&.fi-align-left {
@apply text-left;
& .fi-ta-header-cell-sort-btn {
@apply justify-start rtl:flex-row-reverse;
}
}
&.fi-align-right {
@apply text-right;
& .fi-ta-header-cell-sort-btn {
@apply justify-end rtl:flex-row-reverse;
}
}
&.fi-align-justify,
&.fi-align-between {
@apply text-justify;
& .fi-ta-header-cell-sort-btn {
@apply justify-between;
}
}
&.fi-ta-header-cell-sorted {
& .fi-icon {
@apply text-gray-950 dark:text-white;
}
}
&:not(.fi-ta-header-cell-sorted) {
& .fi-icon {
@apply text-gray-400 dark:text-gray-500;
}
& .fi-ta-header-cell-sort-btn:hover {
& .fi-icon {
@apply text-gray-500 dark:text-gray-400;
}
}
& .fi-ta-header-cell-sort-btn:focus-visible {
& .fi-icon {
@apply text-gray-500 dark:text-gray-400;
}
}
}
&.sm\:fi-hidden {
@apply sm:hidden;
}
&.md\:fi-hidden {
@apply md:hidden;
}
&.lg\:fi-hidden {
@apply lg:hidden;
}
&.xl\:fi-hidden {
@apply xl:hidden;
}
&.\32xl\:fi-hidden {
@apply 2xl:hidden;
}
&.sm\:fi-visible {
@apply hidden sm:table-cell;
}
&.md\:fi-visible {
@apply hidden md:table-cell;
}
&.lg\:fi-visible {
@apply hidden lg:table-cell;
}
&.xl\:fi-visible {
@apply hidden xl:table-cell;
}
&.\32xl\:fi-visible {
@apply hidden 2xl:table-cell;
}
&.fi-wrapped {
@apply whitespace-normal;
}
&:not(.fi-wrapped) {
@apply whitespace-nowrap;
}
& .fi-ta-header-cell-sort-btn {
@apply flex w-full cursor-pointer items-center justify-start gap-x-1;
}
& .fi-icon {
@apply shrink-0 transition duration-75;
}
}
.fi-ta-header-group-cell {
@apply border-gray-200 px-3 py-2 text-sm font-semibold text-gray-950 sm:first-of-type:ps-6 sm:last-of-type:pe-6 dark:border-white/5 dark:text-white [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
&.fi-align-start {
@apply text-start;
}
&.fi-align-center {
@apply text-center;
}
&.fi-align-end {
@apply text-end;
}
&.fi-align-left {
@apply text-left;
}
&.fi-align-right {
@apply text-right;
}
&.fi-align-justify,
&.fi-align-between {
@apply text-justify;
}
&.sm\:fi-hidden {
@apply sm:hidden;
}
&.md\:fi-hidden {
@apply md:hidden;
}
&.lg\:fi-hidden {
@apply lg:hidden;
}
&.xl\:fi-hidden {
@apply xl:hidden;
}
&.\32xl\:fi-hidden {
@apply 2xl:hidden;
}
&.sm\:fi-visible {
@apply hidden sm:table-cell;
}
&.md\:fi-visible {
@apply hidden md:table-cell;
}
&.lg\:fi-visible {
@apply hidden lg:table-cell;
}
&.xl\:fi-visible {
@apply hidden xl:table-cell;
}
&.\32xl\:fi-visible {
@apply hidden 2xl:table-cell;
}
&.fi-wrapped {
@apply whitespace-normal;
}
&:not(.fi-wrapped) {
@apply whitespace-nowrap;
}
}
.fi-ta-empty-header-cell {
@apply w-1;
}
@@ -0,0 +1,25 @@
@import './actions.css' layer(components);
@import './cell.css' layer(components);
@import './columns/checkbox.css' layer(components);
@import './columns/color.css' layer(components);
@import './columns/icon.css' layer(components);
@import './columns/image.css' layer(components);
@import './columns/select.css' layer(components);
@import './columns/text.css' layer(components);
@import './columns/text-input.css' layer(components);
@import './columns/toggle.css' layer(components);
@import './columns/layout/grid.css' layer(components);
@import './columns/layout/panel.css' layer(components);
@import './columns/layout/split.css' layer(components);
@import './columns/layout/stack.css' layer(components);
@import './columns/summaries/icon-count.css' layer(components);
@import './columns/summaries/range.css' layer(components);
@import './columns/summaries/text.css' layer(components);
@import './columns/summaries/values.css' layer(components);
@import './container.css' layer(components);
@import './content.css' layer(components);
@import './empty-state.css' layer(components);
@import './header-cell.css' layer(components);
@import './row.css' layer(components);
@import './table.css' layer(components);
@import './column-manager.css' layer(components);
@@ -0,0 +1,72 @@
.fi-ta-row {
@apply [@media(hover:hover)]:transition-colors [@media(hover:hover)]:duration-75;
&.fi-clickable {
@apply hover:bg-gray-50 dark:hover:bg-white/5;
}
&.fi-striped {
@apply bg-gray-50 dark:bg-white/5;
}
&.fi-collapsed {
@apply hidden;
}
&.fi-ta-group-header-row {
& > td {
@apply bg-gray-50 dark:bg-white/5;
}
}
& .fi-ta-group-header {
@apply flex w-full items-center gap-x-3 px-3 py-2;
&.fi-collapsible {
@apply cursor-pointer;
&.fi-collapsed {
& .fi-icon-btn {
@apply -rotate-180;
}
}
}
& .fi-ta-group-heading {
@apply text-sm font-medium text-gray-950 dark:text-white;
}
& .fi-ta-group-description {
@apply text-sm text-gray-500 dark:text-gray-400;
}
}
&.fi-selected {
&:not(.fi-striped) {
@apply bg-gray-50 dark:bg-white/5;
}
& > *:first-child {
@apply relative;
&::before {
@apply bg-primary-600 absolute inset-y-0 start-0 w-0.5;
content: '';
}
@variant dark {
&::before {
@apply bg-primary-500;
}
}
}
}
}
.fi-ta-reordering {
& .fi-ta-row {
&:not(.fi-ta-row-not-reorderable) {
@apply cursor-move;
}
}
}
@@ -0,0 +1,23 @@
.fi-ta-table {
@apply w-full table-auto divide-y divide-gray-200 text-start dark:divide-white/5;
& > thead {
@apply divide-y divide-gray-200 dark:divide-white/5;
& > tr {
@apply bg-gray-50 dark:bg-white/5;
&.fi-ta-table-head-groups-row {
@apply bg-gray-100 dark:bg-transparent;
}
}
}
& > tbody {
@apply divide-y divide-gray-200 whitespace-nowrap dark:divide-white/5;
}
& > tfoot {
@apply bg-gray-50 dark:bg-white/5;
}
}