@spacemade/ui 0.0.1

package/src/sass/components/_input.scss

@@ -0,0 +1,567 @@
+form,
+.form {
+	.form-control {
+		&.input-sm {
+			color: theme-color('dark');
+			background-color: theme-color('white');
+			border-radius: 12px;
+			border: 1px solid theme-color('light-gray');
+			&:focus {
+				outline: 0;
+				@include InputActiveState('primary');
+			}
+		}
+		&.form-select {
+			padding: 0.75rem;
+			border-radius: 12px;
+			box-shadow: 0.15s ease, color 0.15s ease;
+			border: 1px solid theme-color('light-gray');
+			display: block;
+			width: 100%;
+			z-index: 1;
+			color: theme-color('dark');
+		}
+
+		// This is for transparent inputs such as the
+		// ones in the buy coin modal
+		&.bg-transparent {
+			&:focus {
+				outline: 0;
+				box-shadow: none;
+			}
+
+			// Hide input’s spin box
+			&[type='number'] {
+				-moz-appearance: textfield;
+
+				&::-webkit-outer-spin-button,
+				&::-webkit-inner-spin-button {
+					-webkit-appearance: none;
+					margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+				}
+			}
+		}
+	}
+	.field-container {
+		position: relative;
+
+		.field-assist-bar {
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: calc(100% + 8px);
+			visibility: hidden;
+			transform: translateY(4px) scale(0.985);
+			pointer-events: none;
+			transition: transform 0.18s ease, visibility 0.18s ease;
+			background: theme-color('white');
+			border: 1px solid #d8dee8;
+			border-radius: 10px;
+			padding: 8px;
+			z-index: 20;
+			box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
+
+			&.is-visible {
+				visibility: visible;
+				transform: translateY(0) scale(1);
+				pointer-events: auto;
+			}
+
+				.field-assist-row {
+					display: flex;
+					flex-wrap: wrap;
+					gap: 6px;
+					align-items: center;
+
+					& + .field-assist-row {
+						margin-top: 6px;
+					}
+				}
+
+			.field-assist-prompt {
+				flex: 1 1 auto;
+				height: 30px;
+				border: 1px solid rgba(148, 163, 184, 0.65);
+				border-radius: 8px;
+				padding: 0 10px;
+				font-size: 12px;
+				background-color: theme-color('white');
+				color: theme-color('dark');
+
+				&:focus {
+					outline: 0;
+					border-color: rgba(13, 110, 253, 0.65);
+					box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
+				}
+			}
+
+			.field-assist-btn {
+				height: 30px;
+				border: 0;
+				border-radius: 8px;
+				padding: 0 10px;
+				font-size: 12px;
+				font-weight: 600;
+				color: theme-color('white');
+				background: linear-gradient(135deg, #0d6efd, #198754);
+				transition: opacity 0.15s ease;
+
+				&:disabled {
+					opacity: 0.55;
+				}
+
+				&--secondary {
+					color: theme-color('dark');
+					background: theme-color('white');
+					border: 1px solid rgba(148, 163, 184, 0.7);
+				}
+			}
+
+			.field-assist-status {
+				font-size: 11px;
+				color: theme-color('medium-gray');
+			}
+
+			.field-assist-issues {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 6px;
+				margin-top: 6px;
+			}
+
+			.field-assist-issue {
+				display: inline-flex;
+				align-items: center;
+				border-radius: 999px;
+				padding: 2px 8px;
+				font-size: 11px;
+				line-height: 1.2;
+
+				&--warning {
+					color: #854d0e;
+					background-color: rgba(253, 224, 71, 0.35);
+					border: 1px solid rgba(250, 204, 21, 0.6);
+				}
+
+				&--info {
+					color: #1e3a8a;
+					background-color: rgba(191, 219, 254, 0.5);
+					border: 1px solid rgba(96, 165, 250, 0.55);
+				}
+			}
+		}
+
+		&.is-invalid {
+			.invalid-feedback {
+				display: block;
+			}
+
+			.Input {
+				outline: 0;
+				@include InputActiveState('danger');
+			}
+		}
+
+		.field-prepend {
+			z-index: 2;
+			margin-bottom: 6px;
+		}
+
+		.Input {
+			position: relative;
+			color: theme-color('dark');
+			padding: 0.75rem;
+			background-color: theme-color('white');
+			border-radius: 12px;
+			transition: background 0.15s ease, border 0.15s ease;
+			box-shadow: 0.15s ease, color 0.15s ease;
+			border: 1px solid theme-color('light-gray');
+			display: block;
+			width: 100%;
+			z-index: 1;
+
+			&.flatpickr-mobile {
+				height: 70px;
+			}
+
+			&:focus,
+			&.Input--focused {
+				outline: 0;
+				@include InputActiveState('primary');
+			}
+
+			&.field-assist-target--issues {
+				border-color: rgba(245, 158, 11, 0.9);
+				box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
+				background-image: linear-gradient(135deg, rgba(254, 243, 199, 0.35), rgba(255, 255, 255, 0));
+			}
+
+			&.field-assist-target--updated {
+				animation: field-assist-pulse 1.1s ease;
+			}
+
+			// Hide arrows/spinners from input type number
+			&[type='number'] {
+				-moz-appearance: textfield;
+				&::-webkit-outer-spin-button,
+				&::-webkit-inner-spin-button {
+					-webkit-appearance: none;
+					margin: 0;
+				}
+			}
+		}
+
+		&--labelResting {
+			.Input,
+			.Select {
+				padding-top: 32px;
+				color: theme-color('dark');
+
+				&:disabled {
+					opacity: 0.5;
+				}
+			}
+
+			.Input {
+				&::placeholder {
+					color: transparent;
+				}
+			}
+
+			.field-label {
+				transform: translateY(26px) scale(1);
+				font-size: 16px;
+				opacity: 1;
+			}
+		}
+
+		&.textarea {
+			&.field-container--labelResting {
+				.field-label.field-label--empty {
+					transform: translateY(19px) scale(1);
+					opacity: 1;
+				}
+			}
+		}
+
+		&--labelFloating {
+			.Input,
+			.Select {
+				padding-top: 32px;
+				color: theme-color('dark');
+			}
+
+			.field-label {
+				transform: translateY(13px) scale(0.8);
+			}
+		}
+
+		.field-label {
+			color: theme-color('dark');
+			display: block;
+			margin-bottom: 0.25rem;
+			font-size: 0.93rem;
+			font-weight: 400;
+			transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
+				opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+
+			pointer-events: none;
+			position: absolute;
+			-webkit-transform-origin: top left;
+			-ms-transform-origin: top left;
+			transform-origin: top left;
+			will-change: transform;
+			z-index: 4;
+			margin-left: 13px;
+
+			&--floating {
+				font-size: 0.875rem;
+				padding-bottom: max(2px, 0.25rem);
+				opacity: 0.8;
+			}
+		}
+
+		.field-label:not(.field-label--empty),
+		.field-label--has-prepend {
+			transform: translateY(13px) scale(0.8);
+			font-size: 0.875rem;
+			padding-bottom: max(2px, 0.25rem);
+			opacity: 0.8;
+		}
+	}
+
+	.select-container {
+		position: relative;
+		color: theme-color('dark');
+		background-color: theme-color('white');
+		border-radius: 12px;
+		transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease,
+			color 0.15s ease;
+		display: block;
+		width: 100%;
+		height: 70px;
+		z-index: 100;
+
+		.select--is-disabled {
+			opacity: 0.5;
+		}
+
+		&.is-invalid {
+			.invalid-feedback {
+				display: block;
+			}
+
+			@include InputActiveState('danger');
+		}
+
+		label {
+			position: absolute;
+			top: 0;
+			padding-bottom: max(2px, 0.25rem);
+			transform: translateY(26px) scale(1);
+
+			font-size: 0.93rem;
+			font-weight: 400;
+			transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1),
+				opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+
+			pointer-events: none;
+			position: absolute;
+			-webkit-transform-origin: top left;
+			-ms-transform-origin: top left;
+			transform-origin: top left;
+			will-change: transform;
+			z-index: 1;
+			margin-left: 13px;
+
+			&.select-label-floating {
+				opacity: 0.8;
+				font-size: 0.875rem;
+				transform: translate(0, 9px) scale(0.8);
+			}
+		}
+
+		.select__placeholder {
+			margin-top: 15px;
+			color: theme-color('dark');
+		}
+
+		.select__control {
+			border: 1px solid theme-color('light-gray');
+			box-shadow: none;
+		}
+
+		.select__indicator-separator {
+			display: none;
+		}
+
+		.select__multi-value {
+			margin-top: 1rem;
+		}
+	}
+
+	&.search-form {
+		font-size: 0.875rem;
+		button {
+			z-index: 1;
+			span {
+				color: theme-color('dark');
+			}
+		}
+		label {
+			display: none !important;
+		}
+		input {
+			border: 0;
+			border-radius: 12px;
+			outline: 0;
+			&::placeholder {
+				background-color: transparent;
+				color: theme-color('medium-gray') !important;
+			}
+			&.input-white {
+				background-color: theme-color('white');
+				color: theme-color('dark');
+				border-color: transparent;
+				padding-left: 2.5rem;
+			}
+			&.input-light {
+				background-color: theme-color('lighter-gray');
+				color: theme-color('dark');
+				border-color: transparent;
+				padding-left: 2.5rem;
+			}
+			&.input-dark {
+				background-color: theme-color('dark');
+				color: theme-color('white');
+				border-color: transparent;
+				padding-left: 2.5rem;
+			}
+		}
+	}
+}
+
+@keyframes field-assist-pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.28);
+	}
+	60% {
+		box-shadow: 0 0 0 6px rgba(13, 110, 253, 0);
+	}
+	100% {
+		box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
+	}
+}
+
+.input-custom-focus {
+	&:focus {
+		outline: 0;
+		@include InputActiveState('primary');
+	}
+}
+
+input {
+	&::-ms-reveal,
+	&::-ms-clear {
+		display: none;
+	}
+}
+
+.form-group {
+	.field-container {
+		.Input {
+			border-top-right-radius: 0;
+			border-bottom-right-radius: 0;
+			background-color: theme-color('white');
+		}
+	}
+}
+
+.drop-zone {
+	border-radius: 12px;
+	border: 1px solid theme-color('light-gray');
+	cursor: pointer;
+	overflow: hidden;
+	position: relative;
+	border-radius: 12px;
+	background-color: theme-color('white');
+	color: theme-color('dark');
+	transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease,
+		color 0.15s ease;
+
+	&.is-invalid {
+		@include InputActiveState('danger');
+	}
+
+	&.active {
+		@include InputActiveState('primary');
+	}
+
+	&_actions {
+		bottom: 0;
+		right: 0;
+		padding: 0.25rem;
+	}
+
+	&_active-label {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 1rem;
+		color: theme-color('dark');
+		background: linear-gradient(
+				to bottom,
+				transparent,
+				rgba(theme-color('alice-blue'), 0.85)
+			)
+			no-repeat bottom;
+	}
+
+	&.rounded-circle {
+		&_delete-btn {
+			top: 10px;
+			right: 25px;
+		}
+	}
+}
+
+.input-color {
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	width: 70px;
+	height: 70px;
+	background-color: theme-color('white');
+	border: none;
+	cursor: pointer;
+	border-radius: 15px;
+	border: 2px solid theme-color('light-gray');
+	&::-webkit-color-swatch {
+		border-radius: 15px;
+		border: none;
+	}
+	&::-moz-color-swatch {
+		border-radius: 15px;
+		border: none;
+	}
+}
+
+.coupon-code-inline {
+	.coupon-code-row {
+		align-items: center;
+	}
+
+	.field-container {
+		margin-bottom: 0;
+	}
+
+	.field-label {
+		display: none;
+	}
+
+	.Input {
+		height: 40px;
+		position: relative;
+		color: theme-color('dark');
+		padding: 0.75rem;
+		background-color: theme-color('white');
+		border-radius: 12px;
+		transition: background 0.15s ease, border 0.15s ease;
+		box-shadow: 0.15s ease, color 0.15s ease;
+		border: 1px solid theme-color('light-gray');
+		display: block;
+		width: 100%;
+		z-index: 1;
+
+		&:focus,
+		&.Input--focused {
+			outline: 0;
+			@include InputActiveState('primary');
+		}
+
+		&::placeholder {
+			color: theme-color('gray');
+		}
+	}
+
+	.field-container--labelResting {
+		.Input {
+			padding-top: 0.75rem;
+		}
+
+		.Input::placeholder {
+			color: theme-color('gray');
+		}
+	}
+
+	.coupon-code-apply {
+		height: 40px;
+		min-height: 40px;
+		line-height: 40px;
+		padding-top: 0;
+		padding-bottom: 0;
+		display: inline-flex;
+		align-items: center;
+	}
+}

package/src/sass/components/_menu.scss

@@ -0,0 +1,31 @@
+.categories-dropdown {
+	[data-popper-placement] {
+		min-width: 100% !important;
+	}
+}
+
+.menu-list-container {
+	// This fix an issue on mobile
+	> div:not([data-popper-placement]) {
+		inset: unset !important;
+		right: 0 !important;
+		display: none;
+	}
+}
+
+.chakra-popover__popper {
+	&:not([data-popper-placement]) {
+		inset: unset !important;
+		right: 0 !important;
+		display: none;
+	}
+}
+.sidebar-list {
+	h2 {
+		.cursor-pointer {
+			&:hover {
+				color: var(--bs-light-gray);
+			}
+		}
+	}
+}