@onetype/framework 2.0.52 → 2.0.54

package/addons/render/elements/front/items/self/data/table/table.css

@@ -0,0 +1,588 @@
+/* Root */
+
+.e-305e9281
+{
+	display: block;
+	width: 100%;
+}
+
+/* Holder */
+
+.e-305e9281 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-m);
+	overflow: hidden;
+}
+
+/* Background variants */
+
+.e-305e9281 > .holder.bg-1 { background: var(--ot-bg-1); }
+.e-305e9281 > .holder.bg-2 { background: var(--ot-bg-2); }
+.e-305e9281 > .holder.bg-3 { background: var(--ot-bg-3); }
+.e-305e9281 > .holder.bg-4 { background: var(--ot-bg-4); }
+
+.e-305e9281 > .holder.border { border-color: var(--ot-bg-2-border); }
+.e-305e9281 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-305e9281 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-305e9281 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-305e9281 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+.e-305e9281 > .holder.border-bottom
+{
+	border-color: transparent;
+	border-bottom-color: var(--ot-bg-2-border);
+	border-radius: 0;
+}
+
+.e-305e9281 > .holder.bg-1.border-bottom { border-bottom-color: var(--ot-bg-1-border); }
+.e-305e9281 > .holder.bg-2.border-bottom { border-bottom-color: var(--ot-bg-2-border); }
+.e-305e9281 > .holder.bg-3.border-bottom { border-bottom-color: var(--ot-bg-3-border); }
+.e-305e9281 > .holder.bg-4.border-bottom { border-bottom-color: var(--ot-bg-4-border); }
+
+.e-305e9281 > .holder.clean
+{
+	border-color: transparent;
+	border-radius: none;
+}
+
+/* ===== HEAD ===== */
+
+.e-305e9281 > .holder > .head
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-m);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.e-305e9281 > .holder > .head > .head-icon
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 44px;
+	height: 44px;
+	border-radius: var(--ot-radius-m);
+	background: var(--ot-bg-2);
+	border: 1px solid var(--ot-bg-2-border);
+	color: var(--ot-text-1);
+	flex-shrink: 0;
+}
+
+.e-305e9281 > .holder > .head > .head-icon > i
+{
+	font-size: 22px;
+}
+
+.e-305e9281 > .holder > .head > .head-text
+{
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	min-width: 0;
+	gap: 2px;
+}
+
+.e-305e9281 > .holder > .head > .head-text > .head-title
+{
+	margin: 0;
+	font-family: var(--ot-font-secondary);
+	font-size: 22px;
+	font-weight: 500;
+	letter-spacing: -0.018em;
+	color: var(--ot-text-1);
+	line-height: 1.15;
+	font-variation-settings: 'opsz' 144;
+}
+
+.e-305e9281 > .holder > .head > .head-text > .head-description
+{
+	margin: 0;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	line-height: 1.5;
+}
+
+.e-305e9281 > .holder > .head > .head-actions
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-s);
+}
+
+/* ===== TOOLBAR ===== */
+
+.e-305e9281 > .holder > .toolbar
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-search
+{
+	flex: 1 1 auto;
+	max-width: 320px;
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk
+{
+	display: flex;
+	align-items: center;
+	gap: var(--ot-spacing-m);
+	margin-left: auto;
+	padding: 4px var(--ot-spacing-s) 4px var(--ot-spacing-m);
+	background: var(--ot-brand-opacity);
+	border: 1px solid var(--ot-brand-border);
+	border-radius: var(--ot-radius-s);
+	animation: e-305e9281-bulk-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@keyframes e-305e9281-bulk-in
+{
+	from { opacity: 0; transform: translateY(-4px); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk > .toolbar-bulk-count
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 700;
+	color: var(--ot-brand);
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk > .toolbar-bulk-actions
+{
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-action
+{
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	padding: 5px 10px;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 500;
+	color: var(--ot-text-1);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-action:hover
+{
+	background: var(--ot-bg-1);
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-action.danger:hover
+{
+	background: var(--ot-red-opacity);
+	color: var(--ot-red);
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-action > i
+{
+	font-size: 15px;
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-clear
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-brand);
+	cursor: pointer;
+	margin-left: 4px;
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-clear:hover
+{
+	background: var(--ot-bg-1);
+}
+
+.e-305e9281 > .holder > .toolbar > .toolbar-bulk .bulk-clear > i
+{
+	font-size: 16px;
+}
+
+/* ===== TABLE ===== */
+
+.e-305e9281 > .holder > .table
+{
+	display: flex;
+	flex-direction: column;
+	overflow-x: auto;
+}
+
+.e-305e9281 > .holder > .table > .row,
+.e-305e9281 > .holder > .table > div > .row
+{
+	display: grid;
+	align-items: center;
+	width: 100%;
+	min-height: 48px;
+	padding: 0 var(--ot-spacing-m);
+	gap: var(--ot-spacing-m);
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* Head row */
+
+.e-305e9281 > .holder > .table > .head-row
+{
+	min-height: 42px;
+	background: var(--ot-bg-2);
+	border-bottom: 1px solid var(--ot-bg-2-border);
+	position: sticky;
+	top: 0;
+	z-index: 2;
+}
+
+.e-305e9281 > .holder.bg-2 > .table > .head-row { background: var(--ot-bg-3); }
+.e-305e9281 > .holder.bg-3 > .table > .head-row { background: var(--ot-bg-4); }
+
+.e-305e9281 > .holder > .table > .head-row > .cell
+{
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 700;
+	color: var(--ot-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.06em;
+}
+
+.e-305e9281 > .holder > .table > .head-row > .head-cell
+{
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	user-select: none;
+}
+
+.e-305e9281 > .holder > .table > .head-row > .head-cell.sortable
+{
+	cursor: pointer;
+	transition: color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-305e9281 > .holder > .table > .head-row > .head-cell.sortable:hover
+{
+	color: var(--ot-text-1);
+}
+
+.e-305e9281 > .holder > .table > .head-row > .head-cell.sorted
+{
+	color: var(--ot-brand);
+}
+
+.e-305e9281 > .holder > .table > .head-row > .head-cell > .sort-icon
+{
+	font-size: 14px;
+	opacity: 0.6;
+	transition: opacity 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-305e9281 > .holder > .table > .head-row > .head-cell.sortable:hover > .sort-icon
+{
+	opacity: 1;
+}
+
+/* Body row */
+
+.e-305e9281 > .holder > .table > div > .body-row
+{
+	border-bottom: 1px solid var(--ot-bg-2-border);
+	cursor: default;
+}
+
+.e-305e9281 > .holder > .table > div > .body-row.clickable
+{
+	cursor: pointer;
+}
+
+.e-305e9281 > .holder > .table > div:last-child > .body-row
+{
+	border-bottom: none;
+}
+
+.e-305e9281 > .holder > .table > div > .body-row:hover
+{
+	background: var(--ot-bg-2);
+}
+
+.e-305e9281 > .holder.bg-2 > .table > div > .body-row:hover { background: var(--ot-bg-3); }
+.e-305e9281 > .holder.bg-3 > .table > div > .body-row:hover { background: var(--ot-bg-4); }
+
+.e-305e9281 > .holder > .table > div > .body-row.selected
+{
+	background: var(--ot-brand-opacity);
+}
+
+/* Striped */
+
+.e-305e9281 > .holder.striped > .table > div:nth-child(even) > .body-row
+{
+	background: var(--ot-bg-2);
+}
+
+.e-305e9281 > .holder.striped.bg-2 > .table > div:nth-child(even) > .body-row
+{
+	background: var(--ot-bg-3);
+}
+
+/* Sticky header variant */
+
+.e-305e9281 > .holder.sticky-header > .table
+{
+	max-height: 560px;
+	overflow-y: auto;
+}
+
+/* Cells */
+
+.e-305e9281 > .holder > .table .cell
+{
+	min-width: 0;
+	padding: 10px 0;
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-1);
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-305e9281 > .holder > .table .cell.align-left { text-align: left; }
+.e-305e9281 > .holder > .table .cell.align-center { text-align: center; display: flex; justify-content: center; }
+.e-305e9281 > .holder > .table .cell.align-right { text-align: right; display: flex; justify-content: flex-end; }
+
+/* Select cell */
+
+.e-305e9281 > .holder > .table .select-cell
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+}
+
+.e-305e9281 > .holder > .table .select-cell > .select-box
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	background: var(--ot-bg-1);
+	border: 1.5px solid var(--ot-bg-3-border);
+	border-radius: 4px;
+	color: transparent;
+	cursor: pointer;
+	outline: none;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-305e9281 > .holder > .table .select-cell > .select-box:hover
+{
+	border-color: var(--ot-brand);
+}
+
+.e-305e9281 > .holder > .table .select-cell > .select-box.checked,
+.e-305e9281 > .holder > .table .select-cell > .select-box.indeterminate
+{
+	background: var(--ot-brand);
+	border-color: var(--ot-brand);
+	color: #fff;
+}
+
+.e-305e9281 > .holder > .table .select-cell > .select-box > i
+{
+	font-size: 14px;
+	font-weight: 700;
+}
+
+/* Actions cell */
+
+.e-305e9281 > .holder > .table .actions-cell
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0;
+}
+
+.e-305e9281 > .holder > .table .actions-cell > .actions-trigger
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-3);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-305e9281 > .holder > .table .actions-cell > .actions-trigger:hover
+{
+	background: var(--ot-bg-3);
+	color: var(--ot-text-1);
+}
+
+.e-305e9281 > .holder > .table .actions-cell > .actions-trigger > i
+{
+	font-size: 18px;
+}
+
+/* ===== EMPTY ===== */
+
+.e-305e9281 > .holder > .empty
+{
+	padding: var(--ot-spacing-l);
+}
+
+/* ===== LOADING SKELETON ===== */
+
+.e-305e9281 > .holder > .table .skeleton
+{
+	background: linear-gradient(90deg, var(--ot-bg-2) 0%, var(--ot-bg-3) 50%, var(--ot-bg-2) 100%);
+	background-size: 200% 100%;
+	animation: e-305e9281-shimmer 1.4s infinite linear;
+	border-radius: var(--ot-radius-s);
+}
+
+.e-305e9281 > .holder > .table .skeleton-line
+{
+	height: 14px;
+	width: 80%;
+}
+
+.e-305e9281 > .holder > .table .skeleton-box
+{
+	width: 18px;
+	height: 18px;
+}
+
+@keyframes e-305e9281-shimmer
+{
+	from { background-position: 200% 0; }
+	to { background-position: -200% 0; }
+}
+
+/* ===== PAGINATION ===== */
+
+.e-305e9281 > .holder > .pagination
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--ot-spacing-m);
+	padding: var(--ot-spacing-s) var(--ot-spacing-l);
+	border-top: 1px solid var(--ot-bg-2-border);
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-info
+{
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	color: var(--ot-text-3);
+	font-variant-numeric: tabular-nums;
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-controls
+{
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-controls > .page-btn
+{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 30px;
+	height: 30px;
+	padding: 0;
+	background: transparent;
+	border: 1px solid transparent;
+	border-radius: var(--ot-radius-s);
+	color: var(--ot-text-2);
+	cursor: pointer;
+	transition: background 0.15s cubic-bezier(0.22, 1, 0.36, 1), color 0.15s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.15s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-controls > .page-btn:hover:not(:disabled)
+{
+	background: var(--ot-bg-2);
+	color: var(--ot-text-1);
+	border-color: var(--ot-bg-2-border);
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-controls > .page-btn:disabled
+{
+	opacity: 0.35;
+	cursor: not-allowed;
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-controls > .page-btn > i
+{
+	font-size: 18px;
+}
+
+.e-305e9281 > .holder > .pagination > .pagination-controls > .page-current
+{
+	padding: 0 var(--ot-spacing-s);
+	font-family: var(--ot-font-primary);
+	font-size: var(--ot-size-s);
+	font-weight: 700;
+	color: var(--ot-text-1);
+	font-variant-numeric: tabular-nums;
+}
+
+/* ===== RESPONSIVE ===== */
+
+@media (max-width: 767.98px)
+{
+	.e-305e9281 > .holder > .toolbar
+	{
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.e-305e9281 > .holder > .toolbar > .toolbar-search
+	{
+		max-width: 100%;
+	}
+
+	.e-305e9281 > .holder > .pagination
+	{
+		flex-direction: column;
+		gap: var(--ot-spacing-s);
+	}
+}