add tariff table, add edit tariff modal window

2026-05-29 18:43:37 +07:00
parent 96808c4a12
commit 8928960c34
7 changed files with 900 additions and 164 deletions
@@ -0,0 +1,194 @@
+@use './variable.scss' as v;
+
+.tariff-edit-modal {
+	padding: 1.5rem;
+	min-width: 500px;
+	max-width: 600px;
+	max-height: 80vh;
+	overflow-y: auto;
+
+	&__title {
+		font-size: 1.5rem;
+		font-weight: bold;
+		margin-bottom: 1.5rem;
+		color: #111827;
+	}
+
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	&__info-section {
+		border-bottom: 1px solid #e5e7eb;
+		padding-bottom: 0.75rem;
+
+		&:last-of-type {
+			border-bottom: none;
+		}
+	}
+
+	&__label {
+		display: block;
+		font-size: 0.875rem;
+		font-weight: 500;
+		color: #374151;
+		margin-bottom: 0.5rem;
+	}
+
+	&__value {
+		color: #111827;
+		word-break: break-word;
+		font-size: 0.875rem;
+	}
+
+	&__input {
+		width: 100%;
+		padding: 0.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.25rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: #111827;
+		background-color: #ffffff;
+		transition: all 0.2s;
+
+		&:focus {
+			outline: none;
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+		}
+
+		&::placeholder {
+			color: #9ca3af;
+		}
+
+		&:disabled {
+			background-color: #f3f4f6;
+			cursor: not-allowed;
+		}
+
+		&[type="number"] {
+			-moz-appearance: textfield;
+
+			&::-webkit-inner-spin-button,
+			&::-webkit-outer-spin-button {
+				display: none;
+			}
+		}
+	}
+
+	&__textarea {
+		width: 100%;
+		padding: 0.5rem;
+		border: 1px solid #e5e7eb;
+		border-radius: 0.25rem;
+		font-size: 0.875rem;
+		font-family: inherit;
+		color: #111827;
+		background-color: #ffffff;
+		resize: vertical;
+		transition: all 0.2s;
+
+		&:focus {
+			outline: none;
+			border-color: #3b82f6;
+			box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+		}
+
+		&::placeholder {
+			color: #9ca3af;
+		}
+
+		&:disabled {
+			background-color: #f3f4f6;
+			cursor: not-allowed;
+		}
+	}
+
+	&__actions {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.75rem;
+	}
+
+	// Стили для DropDownList внутри модального окна
+	.dropdown {
+		width: 100%;
+	}
+}
+
+// Адаптация для мобильных устройств
+@media (max-width: 768px) {
+	.tariff-edit-modal {
+		min-width: 90vw;
+		padding: 1rem;
+
+		&__title {
+			font-size: 1.25rem;
+			margin-bottom: 1rem;
+		}
+
+		&__info-section {
+			padding-bottom: 0.5rem;
+		}
+
+		&__actions {
+			flex-direction: column-reverse;
+
+			button {
+				width: 100%;
+			}
+		}
+	}
+}
+
+// Стили для скроллбара (опционально)
+.tariff-edit-modal {
+	scrollbar-width: thin;
+	scrollbar-color: #cbd5e1 #f1f5f9;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: #f1f5f9;
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: #cbd5e1;
+		border-radius: 3px;
+
+		&:hover {
+			background: #94a3b8;
+		}
+	}
+}
+
+.tariff-edit-modal__row {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 1rem;
+
+	@media (max-width: 768px) {
+		grid-template-columns: 1fr;
+		gap: 0.75rem;
+	}
+}
+
+.tariff-edit-modal__info-section--half {
+	@extend .tariff-edit-modal__info-section;
+
+	@media (min-width: 769px) {
+		&:first-child {
+			padding-right: 0.5rem;
+		}
+
+		&:last-child {
+			padding-left: 0.5rem;
+		}
+	}
+}