lula2/src/styles/tables.css

A tool for managing compliance as code in your GitHub repositories.

/*
  Copyright 2025 Defense Unicorns
  SPDX-License-Identifier: LicenseRef-Defense-Unicorns-Commercial
*/

@reference "tailwindcss";

@layer components {
	.table-page {
		@apply flex max-h-full flex-col gap-6 sm:gap-8;
	}

	.controls-container {
		@apply flex flex-col items-center justify-between gap-4 p-1 md:flex-row;
	}

	.table-search {
		@apply relative w-full md:w-1/2;
	}

	.table-search-icon {
		@apply pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3;
		svg {
			@apply h-4 w-4 text-gray-400;
		}
	}

	.table-search-input {
		@apply w-full rounded-md border border-gray-700 bg-gray-800 py-2 pr-10 pl-10 [&::-webkit-search-cancel-button]:hidden;
	}

	.table-search-clear-btn {
		@apply absolute inset-y-0 right-0 flex cursor-pointer items-center pr-3 text-gray-400 hover:text-white;
	}

	.controls-info-container {
		@apply flex justify-center md:justify-start;
	}
	.controls-info-button {
		@apply flex cursor-pointer items-center gap-1 rounded-md bg-blue-900/40 px-3 py-2 text-sm text-nowrap text-blue-200 hover:bg-blue-800/60;
	}
	.controls-info-button-icon {
		@apply h-4 w-4;
	}

	.controls-info-modal-container {
		@apply max-w-2xl rounded-lg border border-gray-700 bg-gray-900 p-0 shadow-xl;
	}

	.controls-info-modal-title {
		@apply flex items-center justify-between border-b border-gray-800 px-6 py-4;
		h3 {
			@apply text-lg font-semibold text-white;
		}
	}

	.controls-info-modal-body {
		@apply p-6;
	}

	.error-container {
		@apply flex max-h-full flex-col gap-4 sm:gap-6;
	}

	.error-content {
		@apply mb-6 rounded-lg bg-red-900/30 p-4 text-red-200;
	}

	.error-retry-btn {
		@apply mt-2 rounded-md bg-red-800 px-3 py-1 text-sm hover:bg-red-700;
	}

	.table-container {
		@apply relative flex min-h-[var(--table-height)] overflow-y-hidden portrait:sm:min-h-auto;
	}

	.table-head {
		@apply bg-gray-900;
	}

	.header-cell {
		@apply px-4 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase;
	}

	.table-row {
		@apply cursor-auto border-b border-gray-800;
	}

	.first-data-column {
		@apply pl-4!;
	}

	.table-row--expandable {
		@apply cursor-pointer hover:bg-gray-800/30!;
	}
	.data-cell {
		@apply px-2 py-4 text-sm whitespace-nowrap;
	}

	.expanded-row-container {
		@apply flex w-full flex-col justify-between gap-6 p-4 sm:flex-row;
	}

	.multi-item-cell {
		@apply flex items-center gap-2.5;
	}

	.initial-avatar {
		@apply hidden h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-indigo-700 text-indigo-300 sm:flex;
	}
}