aril 1.2.18 → 2.0.1-dev.1

package/theme/layout/app/layout/app.layout.component.scss

@@ -0,0 +1,372 @@
+// =====================================================================
+//  Aril Tab Bar
+// =====================================================================
+//  Yapı:
+//    [topbar]
+//    [breadcrumb-strip] ← yeni katman: aktif route'un menü zinciri
+//    [tabs-bar]         ← lavender tinted, rounded "kart tab"lar
+//    [router-outlet]
+//
+//  Renkler/spacing Aril temasının CSS variable'ları üzerinden okunur;
+//  Light/Dim/Dark tema otomatik takip eder.
+// =====================================================================
+
+$tab-radius: 10px;
+$tab-height: 32px;
+$tabs-bar-height: 48px;
+$breadcrumb-height: 38px;
+$transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
+$transition-std: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+
+:host {
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+}
+
+.layout-content {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+
+// --- BREADCRUMB STRIP ------------------------------------------------
+//  Stiller global `styles/layout/_breadcrumb.scss` içinde `.p-breadcrumb.breadcrumb-strip`
+//  selector'ı altında. PrimeNG override'ı tek bir yerden; component SCSS'inde
+//  ::ng-deep gürültüsüne gerek yok.
+
+// --- TABS BAR --------------------------------------------------------
+//  Hafif lavender tint zemin. Inactive tab'lar bar'a kaynaşır,
+//  active tab beyaz + soft shadow ile yukarı "kaldırılmış" görünür.
+
+.tabs-bar {
+	position: relative;
+	display: flex;
+	align-items: center;
+	background: var(--surface-section, #f4f6fb);
+	border-bottom: 1px solid var(--surface-border, #e5e7eb);
+	padding: 0 12px;
+	min-height: $tabs-bar-height;
+	flex-shrink: 0;
+	z-index: 1;
+	gap: 4px;
+}
+
+.tabs-container {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	flex: 1;
+	overflow-x: auto;
+	overflow-y: hidden;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+	min-width: 0;
+	padding: 8px 0;
+
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
+// --- PAGE WRAPPER ----------------------------------------------------
+//  router-outlet'in render ettiği sayfa içeriği. Tabs-bar ve sidebar
+//  ile arasında nefes alınacak boşluk verir; aşan içerik scroll olur.
+
+.layout-page {
+	flex: 1;
+	min-height: 0;
+	overflow: auto;
+	padding: 16px;
+}
+
+// --- TAB ITEM (rounded-all "kart") -----------------------------------
+
+.tab-item {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	height: $tab-height;
+	min-width: 130px;
+	max-width: 240px;
+	padding: 0 10px 0 12px;
+	margin: 0 4px;
+	background: transparent;
+	color: var(--text-color-secondary, #6b7280);
+	cursor: pointer;
+	user-select: none;
+	font-family: inherit;
+	font-size: 0.8125rem; // 13px
+	font-weight: 500;
+	line-height: 1;
+	border-radius: $tab-radius;
+	transition:
+		background-color $transition-fast,
+		color $transition-fast,
+		box-shadow $transition-fast;
+
+	&:hover:not(.active) {
+		background: var(--surface-hover, rgba(15, 23, 42, 0.04));
+		color: var(--text-color, #475569);
+
+		.tab-close-btn,
+		.tab-icon {
+			opacity: 1;
+		}
+	}
+
+	&.active {
+		background: var(--surface-card, #ffffff);
+		color: var(--text-color, #1e293b);
+		font-weight: 600;
+		// Soft elevation — Aril'in lavender shadow paleti
+		box-shadow:
+			0 1px 2px rgba(15, 23, 42, 0.06),
+			0 0 0 1px rgba(217, 221, 252, 0.5);
+
+		.tab-close-btn {
+			opacity: 1;
+		}
+
+		.tab-icon {
+			opacity: 1;
+			color: var(--primary-color, #6366f1);
+		}
+	}
+
+	.tab-icon {
+		flex-shrink: 0;
+		font-size: 0.875rem; // 14px
+		opacity: 0.7;
+		transition:
+			opacity $transition-fast,
+			color $transition-std;
+	}
+
+	.tab-title {
+		flex: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		min-width: 0;
+	}
+
+	.tab-close-btn {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 18px;
+		height: 18px;
+		padding: 0;
+		border: none;
+		border-radius: 50%;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+		opacity: 0; // hover/active'de görünür
+		line-height: 1;
+		transition:
+			opacity $transition-fast,
+			background-color $transition-fast;
+
+		&:hover {
+			background: rgba(15, 23, 42, 0.08);
+		}
+
+		i {
+			font-size: 10px;
+		}
+	}
+
+	// --- PINNED tab — kompakt görünüm (Chrome-vari) ----------------------
+	// Sadece icon, başlık + close button gizli. Genişlik dar, padding sıkı.
+	&.pinned {
+		min-width: 36px;
+		max-width: 36px;
+		padding: 0;
+		justify-content: center;
+		gap: 0;
+
+		.tab-icon {
+			opacity: 1;
+			margin: 0;
+		}
+	}
+}
+
+// Pinned segment'i normal segment'ten görsel olarak ayır — pinned bloğun sağına
+// dikey ayrac. Chrome'daki tab strip'inin pin separator'ına benzer.
+.tabs-container .tab-item.pinned + .tab-item:not(.pinned) {
+	margin-left: 12px;
+	position: relative;
+
+	&::before {
+		content: '';
+		position: absolute;
+		left: -8px;
+		top: 6px;
+		bottom: 6px;
+		width: 1px;
+		background: var(--surface-border, #e5e7eb);
+	}
+}
+
+// --- CONTROLS (scroll chevrons + add button) -------------------------
+
+.tabs-scroll-btn,
+.tabs-add-btn {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	color: var(--text-color-secondary, #6b7280);
+	cursor: pointer;
+	transition:
+		background-color $transition-fast,
+		color $transition-fast;
+
+	&:hover {
+		background: var(--surface-hover, rgba(15, 23, 42, 0.04));
+		color: var(--text-color, #475569);
+	}
+
+	i {
+		font-size: 11px;
+	}
+}
+
+.tabs-add-btn {
+	margin-left: 4px;
+}
+
+// --- DRAG & DROP -----------------------------------------------------
+
+.cdk-drag-preview {
+	box-sizing: border-box;
+	height: $tab-height;
+	padding: 0 12px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: var(--surface-card, #ffffff);
+	color: var(--text-color, #1e293b);
+	border: 1px solid var(--surface-border, #e5e7eb);
+	border-radius: $tab-radius;
+	box-shadow:
+		0 4px 30px rgba(221, 224, 255, 0.54),
+		0 2px 6px rgba(15, 23, 42, 0.06);
+	font-size: 0.8125rem;
+	font-weight: 600;
+	line-height: 1;
+	opacity: 0.96;
+	z-index: 1000;
+
+	.tab-icon {
+		font-size: 0.875rem;
+		opacity: 0.85;
+		flex-shrink: 0;
+	}
+
+	.tab-title {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 180px;
+	}
+
+	.tab-close-btn {
+		display: none;
+	}
+}
+
+// Drop hedefini gösteren placeholder — tab şeklini koruyarak yarı görünür ve dashed kenarlı.
+// Kullanıcı sürükleme sırasında bırakacağı konumu net görür; tamamen gizli olduğunda
+// diğer tab'ların kayışı tek ipucuydu.
+.cdk-drag-placeholder {
+	opacity: 0.5;
+	background: var(--surface-section, #f4f6fb);
+	border: 1px dashed var(--primary-color, #6366f1);
+	box-shadow: none;
+
+	.tab-icon,
+	.tab-title {
+		opacity: 0.55;
+	}
+
+	.tab-close-btn {
+		visibility: hidden;
+	}
+}
+
+.cdk-drag-animating {
+	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.tabs-container.cdk-drop-list-dragging .tab-item:not(.cdk-drag-placeholder) {
+	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+// --- DARK / DIM ------------------------------------------------------
+
+:host-context(.layout-dark),
+:host-context(.layout-dim) {
+	.tabs-bar {
+		background: var(--surface-section, #111827);
+		border-bottom-color: var(--surface-border, #334155);
+	}
+
+	.tab-item {
+		color: var(--text-color-secondary, rgba(255, 255, 255, 0.6));
+
+		&:hover:not(.active) {
+			background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+			color: var(--text-color, rgba(255, 255, 255, 0.87));
+		}
+
+		&.active {
+			background: var(--surface-card, #1e293b);
+			color: var(--text-color, rgba(255, 255, 255, 0.87));
+			box-shadow:
+				0 1px 2px rgba(0, 0, 0, 0.3),
+				0 0 0 1px rgba(255, 255, 255, 0.06);
+		}
+
+		.tab-close-btn:hover {
+			background: rgba(255, 255, 255, 0.1);
+		}
+	}
+
+	.tabs-scroll-btn,
+	.tabs-add-btn {
+		color: var(--text-color-secondary, rgba(255, 255, 255, 0.6));
+
+		&:hover {
+			background: var(--surface-hover, rgba(255, 255, 255, 0.05));
+			color: var(--text-color, rgba(255, 255, 255, 0.87));
+		}
+	}
+
+	.cdk-drag-preview {
+		background: var(--surface-card, #1e293b);
+		color: var(--text-color, rgba(255, 255, 255, 0.87));
+		border-color: var(--surface-border, #334155);
+		box-shadow:
+			0 10px 28px rgba(0, 0, 0, 0.4),
+			0 2px 6px rgba(0, 0, 0, 0.2);
+	}
+
+	.cdk-drag-placeholder {
+		background: var(--surface-section, #111827);
+		border-color: var(--primary-color, #818cf8);
+	}
+}