@abstraks-dev/ui-library 1.0.1

package/dist/styles/loader.scss

@@ -0,0 +1,354 @@
+@use 'variables' as *;
+
+.loader {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	flex-direction: column;
+	gap: 16px;
+	position: relative;
+	width: 100%;
+
+	/* Size variants with mobile-first approach */
+	&--sm {
+		gap: 8px;
+	}
+
+	&--md {
+		gap: 12px;
+	}
+
+	&--lg {
+		gap: 16px;
+	}
+
+	&--xl {
+		gap: 20px;
+	}
+
+	/* Responsive adjustments */
+	@media #{$medium} {
+		gap: 20px;
+
+		&--sm {
+			gap: 12px;
+		}
+
+		&--md {
+			gap: 16px;
+		}
+
+		&--lg {
+			gap: 20px;
+		}
+
+		&--xl {
+			gap: 24px;
+		}
+	}
+
+	@media #{$large} {
+		&--sm {
+			gap: 16px;
+		}
+
+		&--md {
+			gap: 20px;
+		}
+
+		&--lg {
+			gap: 24px;
+		}
+
+		&--xl {
+			gap: 28px;
+		}
+	}
+
+	@media #{$xlarge} {
+		&--sm {
+			gap: 20px;
+		}
+
+		&--md {
+			gap: 24px;
+		}
+
+		&--lg {
+			gap: 28px;
+		}
+
+		&--xl {
+			gap: 32px;
+		}
+	}
+
+	/* Variant styles */
+	&--svg {
+		.loader__svg {
+			display: block;
+		}
+
+		.loader__spinner,
+		.loader__dots,
+		.loader__pulse {
+			display: none;
+		}
+	}
+
+	&--spinner {
+		.loader__spinner {
+			display: block;
+			position: relative;
+			animation: loader-spin 1s linear infinite;
+		}
+
+		.loader__svg,
+		.loader__dots,
+		.loader__pulse {
+			display: none;
+		}
+	}
+
+	&--dots {
+		.loader__dots {
+			display: flex;
+		}
+
+		.loader__svg,
+		.loader__spinner,
+		.loader__pulse {
+			display: none;
+		}
+	}
+
+	&--pulse {
+		.loader__pulse {
+			display: block;
+		}
+
+		.loader__svg,
+		.loader__spinner,
+		.loader__dots {
+			display: none;
+		}
+	}
+
+	&__heading {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		text-align: center;
+		margin-bottom: 0;
+		color: currentColor;
+
+		/* Enhanced responsive typography */
+		@media #{$medium} {
+			font-size: 1.1em;
+		}
+
+		@media #{$large} {
+			font-size: 1.2em;
+		}
+	}
+
+	&__wrapper {
+		display: flex;
+		width: 100%;
+		justify-content: center;
+		align-items: center;
+		position: relative;
+	}
+
+	&__svg {
+		display: block;
+		max-width: 100%;
+		height: auto;
+
+		/* Responsive sizing */
+		@media #{$medium} {
+			transform: scale(1.1);
+		}
+
+		@media #{$large} {
+			transform: scale(1.2);
+		}
+
+		@media #{$xlarge} {
+			transform: scale(1.3);
+		}
+	}
+
+	&__spinner {
+		display: block;
+		max-width: 100%;
+		height: auto;
+	}
+
+	/* Dots variant styles */
+	&__dots {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+
+		@media #{$medium} {
+			gap: 10px;
+		}
+
+		@media #{$large} {
+			gap: 12px;
+		}
+	}
+
+	&__dot {
+		border-radius: 50%;
+		animation: loader-dot-bounce 1.4s ease-in-out infinite both;
+
+		&:nth-child(1) {
+			animation-delay: -0.32s;
+		}
+		&:nth-child(2) {
+			animation-delay: -0.16s;
+		}
+		&:nth-child(3) {
+			animation-delay: 0s;
+		}
+	}
+
+	/* Pulse variant styles */
+	&__pulse {
+		border-radius: 50%;
+		animation: loader-pulse 2s ease-in-out infinite;
+		opacity: 0.6;
+
+		@media #{$medium} {
+			transform: scale(1.1);
+		}
+
+		@media #{$large} {
+			transform: scale(1.2);
+		}
+	}
+
+	&__content {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+		width: 100%;
+		margin-top: 8px;
+
+		@media #{$medium} {
+			margin-top: 12px;
+		}
+
+		@media #{$large} {
+			margin-top: 16px;
+		}
+	}
+
+	/* Accessibility and reduced motion support */
+	@media (prefers-reduced-motion: reduce) {
+		.loader__spinner {
+			animation: none;
+		}
+
+		.loader__svg animateTransform {
+			animation-duration: 0s;
+		}
+
+		.loader__dot {
+			animation: none;
+			opacity: 0.7;
+		}
+
+		.loader__pulse {
+			animation: none;
+			opacity: 0.8;
+		}
+	}
+
+	/* High contrast mode support */
+	@media (prefers-contrast: high) {
+		&__svg,
+		&__spinner,
+		&__dot,
+		&__pulse {
+			border: 2px solid currentColor;
+		}
+
+		&__heading {
+			font-weight: bold;
+		}
+	}
+
+	/* Focus management - loaders should not be focusable */
+	&:focus {
+		outline: none;
+	}
+
+	/* Dark mode considerations */
+	@media (prefers-color-scheme: dark) {
+		&__heading {
+			color: #ffffff;
+		}
+
+		&__svg,
+		&__spinner {
+			filter: brightness(1.2);
+		}
+	}
+}
+
+/* Animation keyframes */
+@keyframes loader-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes loader-dot-bounce {
+	0%,
+	80%,
+	100% {
+		transform: scale(0);
+		opacity: 0.5;
+	}
+	40% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+@keyframes loader-pulse {
+	0% {
+		transform: scale(1);
+		opacity: 1;
+	}
+	50% {
+		transform: scale(1.1);
+		opacity: 0.7;
+	}
+	100% {
+		transform: scale(1);
+		opacity: 1;
+	}
+}
+
+/* Screen reader only utility class */
+.sr-only {
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important;
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
+}

package/dist/styles/logo.scss

@@ -0,0 +1,19 @@
+
+.logo {
+	width: 50%;
+	display: inline-flex;
+	height: 50px;
+
+	@media (min-width: 768px) {
+		width: auto;
+	}
+
+	.anchor {
+		display: flex;
+		width: auto;
+
+		.img {
+			margin: 0;
+		}
+	}
+}