@abstraks-dev/ui-library 1.0.1

package/dist/styles/crud.scss

@@ -0,0 +1,474 @@
+@use 'variables' as *;
+
+// Mixin for disabling animations and transitions
+@mixin disable-animations {
+	transition: none !important;
+	transform: none !important;
+	opacity: 1 !important;
+}
+
+// Mixin for disabling motion effects
+@mixin disable-motion-transforms {
+	transform: none;
+	transition: none;
+}
+
+.crud {
+	// Screen reader only content
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.list {
+		position: relative;
+
+		.item {
+			display: flex;
+			flex-direction: column;
+			margin-bottom: 16px;
+			padding: 16px;
+			background-color: $color-white;
+			border: 1px solid $gray-300;
+			border-radius: 8px;
+			transition: all 0.2s ease;
+			position: relative;
+
+			&:hover {
+				border-color: $gray-400;
+				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+			}
+
+			&:focus-within {
+				outline: 2px solid $focus-color;
+				outline-offset: 2px;
+				border-color: $focus-color;
+			}
+
+			// Drag and drop states
+			&.dragging {
+				opacity: 0.5;
+				transform: rotate(5deg);
+				z-index: $z-index-overlay;
+				cursor: grabbing;
+				// Ensure drag events still work during animation
+				pointer-events: auto;
+			}
+
+			&.drop-target {
+				border-color: $color-primary;
+				background-color: rgba($color-primary, 0.1);
+				transform: scale(1.02);
+				// Ensure drop events work
+				pointer-events: auto;
+			}
+
+			&[draggable='true'] {
+				cursor: grab;
+
+				&:hover {
+					transform: translateY(-2px);
+					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+				}
+			}
+
+			@media #{$medium} {
+				flex-direction: row;
+				align-items: center;
+				margin-bottom: 20px;
+				padding: 20px;
+			}
+
+			@media #{$large} {
+				margin-bottom: 24px;
+				padding: 24px;
+			}
+
+			@media #{$xlarge} {
+				margin-bottom: 28px;
+				padding: 28px;
+			}
+
+			.input-container {
+				display: flex;
+				flex-direction: column;
+				width: 100%;
+				margin-bottom: 12px;
+
+				@media #{$medium} {
+					width: 75%;
+					margin-bottom: 0;
+					margin-right: 16px;
+				}
+
+				@media #{$large} {
+					width: 80%;
+					margin-right: 20px;
+				}
+
+				@media #{$xlarge} {
+					width: 85%;
+					margin-right: 24px;
+				}
+
+				.text-input,
+				.select-input {
+					line-height: normal;
+					background-color: $color-white;
+					width: 100%;
+					padding: 12px 16px;
+					border: 2px solid $gray-300;
+					border-radius: 6px;
+					font-size: 16px;
+					font-weight: normal;
+					color: $color-font-body;
+					transition: all 0.2s ease;
+
+					&:focus {
+						outline: none;
+						border-color: $focus-color;
+						box-shadow: 0 0 0 3px rgba($focus-color, 0.2);
+					}
+
+					&:hover:not(:focus) {
+						border-color: $gray-500;
+					}
+
+					&[disabled] {
+						cursor: not-allowed;
+						background-color: $gray-100;
+						color: $gray-500;
+
+						&:hover {
+							border-color: $gray-300;
+						}
+					}
+
+					@media #{$medium} {
+						padding: 14px 18px;
+						font-size: 15px;
+					}
+
+					@media #{$large} {
+						padding: 16px 20px;
+					}
+
+					&[type='search'] {
+						box-sizing: content-box;
+					}
+
+					&[type='search']::-webkit-search-cancel-button,
+					&[type='search']::-webkit-search-decoration {
+						-webkit-appearance: none;
+					}
+				}
+
+				.item-content {
+					padding: 12px 16px;
+					margin: 0;
+					background-color: transparent;
+					border: 2px solid transparent;
+					border-radius: 6px;
+					line-height: 1.5;
+					min-height: 48px;
+					display: flex;
+					align-items: center;
+
+					@media #{$medium} {
+						padding: 14px 18px;
+						min-height: 52px;
+					}
+
+					@media #{$large} {
+						padding: 16px 20px;
+						min-height: 56px;
+					}
+				}
+			}
+
+			.inside-btns {
+				display: flex;
+				flex-direction: row;
+				justify-content: flex-start;
+				gap: 8px;
+				width: 100%;
+
+				@media #{$medium} {
+					justify-content: flex-end;
+					width: auto;
+					gap: 12px;
+				}
+
+				@media #{$large} {
+					gap: 16px;
+				}
+
+				.btn-icon {
+					display: flex;
+					align-items: center;
+					flex-direction: row;
+					gap: 8px;
+					padding: 8px 12px;
+					border: 2px solid transparent;
+					background-color: transparent;
+					border-radius: 6px;
+					cursor: pointer;
+					transition: all 0.2s ease;
+					font-size: 14px;
+					font-weight: 500;
+					min-height: 44px;
+					min-width: 44px;
+
+					&:hover {
+						background-color: $gray-100;
+						border-color: $gray-300;
+					}
+
+					&:focus {
+						outline: 2px solid $focus-color;
+						outline-offset: 2px;
+						background-color: $gray-100;
+					}
+
+					&:active {
+						transform: translateY(1px);
+					}
+
+					&.save-btn:hover {
+						background-color: rgba($color-success, 0.1);
+						border-color: $color-success;
+						color: $color-success;
+					}
+
+					&.delete-btn:hover {
+						background-color: rgba($color-error, 0.1);
+						border-color: $color-error;
+						color: $color-error;
+					}
+
+					&.edit-btn:hover {
+						background-color: rgba($color-secondary, 0.1);
+						border-color: $color-secondary;
+						color: $color-secondary;
+					}
+
+					@media #{$medium} {
+						padding: 10px 16px;
+						font-size: 15px;
+					}
+
+					@media #{$large} {
+						padding: 12px 18px;
+					}
+
+					.text {
+						display: none;
+
+						@media #{$medium} {
+							display: inline-flex;
+						}
+					}
+
+					// Icon only on small screens
+					@media (max-width: 767px) {
+						justify-content: center;
+						padding: 12px;
+
+						.text {
+							display: none;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.add-btn {
+		margin-top: 20px;
+		width: 100%;
+
+		@media #{$medium} {
+			width: auto;
+			margin-top: 24px;
+		}
+
+		@media #{$large} {
+			margin-top: 28px;
+		}
+
+		.text {
+			margin-left: 12px;
+
+			@media #{$medium} {
+				margin-left: 15px;
+			}
+		}
+	}
+
+	// Animation classes for react-transition-group
+	.crud-item-enter {
+		opacity: 0;
+		transform: translateY(-20px) scale(0.95);
+	}
+
+	.crud-item-enter-active {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+		transition: opacity 300ms ease, transform 300ms ease;
+	}
+
+	.crud-item-exit {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+	}
+
+	.crud-item-exit-active {
+		opacity: 0;
+		transform: translateY(-20px) scale(0.95);
+		transition: opacity 300ms ease, transform 300ms ease;
+	}
+
+	.crud-item-appear {
+		opacity: 0;
+		transform: translateY(20px) scale(0.95);
+	}
+
+	.crud-item-appear-active {
+		opacity: 1;
+		transform: translateY(0) scale(1);
+		transition: opacity 300ms ease, transform 300ms ease;
+	}
+
+	// Animated wrapper for drag-and-drop compatibility
+	.animated-crud-item {
+		// Simple wrapper that doesn't interfere with drag events
+		width: 100%;
+		display: block;
+		position: relative;
+
+		// Ensure drag events work properly on the wrapper
+		&[draggable='true'] {
+			cursor: grab;
+
+			&:active {
+				cursor: grabbing;
+			}
+		}
+
+		// Drag states for the animation wrapper
+		&.dragging {
+			opacity: 0.5;
+			transform: rotate(2deg);
+			z-index: $z-index-overlay;
+			cursor: grabbing;
+
+			// Disable transitions during drag
+			* {
+				transition: none !important;
+			}
+		}
+
+		&.drop-target {
+			background-color: rgba(33, 150, 243, 0.1);
+			border: 2px dashed #2196f3;
+			border-radius: 4px;
+
+			// Disable transitions during drop targeting
+			* {
+				transition: none !important;
+			}
+		}
+
+		// Disable animations during drag operations to prevent interference
+		&.dragging,
+		&.drop-target {
+			.crud-item-enter-active,
+			.crud-item-appear-active {
+				transition: none !important;
+				transform: none !important;
+			}
+		}
+
+		// When dragging, disable pointer events on inner content to ensure drag events reach the wrapper
+		&.dragging .item {
+			pointer-events: none;
+
+			// Keep buttons accessible but prevent them from interfering with drag
+			button,
+			input,
+			select,
+			textarea {
+				pointer-events: none;
+			}
+		}
+	}
+
+	// High contrast mode support
+	@media (prefers-contrast: high) {
+		.list .item {
+			border-width: 3px;
+
+			&:hover {
+				border-color: $color-black;
+			}
+
+			&:focus-within {
+				outline-width: 3px;
+			}
+		}
+
+		.inside-btns .btn-icon {
+			border-width: 2px;
+
+			&:hover {
+				border-color: $color-black;
+			}
+		}
+	}
+
+	// Reduced motion support
+	@media (prefers-reduced-motion: reduce) {
+		.list .item {
+			@include disable-motion-transforms;
+
+			&:hover {
+				transform: none;
+				box-shadow: none;
+			}
+
+			&.dragging {
+				transform: none;
+				opacity: 0.7;
+			}
+
+			&.drop-target {
+				transform: none;
+			}
+		}
+
+		.inside-btns .btn-icon {
+			@include disable-motion-transforms;
+
+			&:active {
+				transform: none;
+			}
+		}
+
+		// Disable all transition-group animations using mixin
+		.crud-item-enter,
+		.crud-item-enter-active,
+		.crud-item-exit,
+		.crud-item-exit-active,
+		.crud-item-appear,
+		.crud-item-appear-active {
+			@include disable-animations;
+		}
+	}
+}