@plusscommunities/pluss-feature-builder-web-d 1.0.2-beta.0

package/src/screens/Form.module.css

@@ -0,0 +1,734 @@
+.content {
+	flex: 1 1 auto;
+	display: flex;
+	flex-flow: column nowrap;
+	padding: 2rem 0 3rem 0; /* Add proper top/bottom padding */
+	min-height: 100%; /* Ensure full height for proper spacing */
+}
+
+/* New page wrapper for centered container approach */
+.pageWrapper {
+	padding: 2rem 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+}
+
+@media (min-width: 768px) {
+	.pageWrapper {
+		padding: 3rem 0;
+	}
+}
+
+/* Form container styling when using CenteredContainer */
+.formContainer {
+	background-color: var(--bg-white);
+}
+
+/* Section styling */
+.section {
+	margin-bottom: 2rem;
+		padding:  0 0 2em;
+}
+
+.section--no-border {
+		border-bottom: none;
+}
+
+.subtitle {
+	color: var(--text-bluegrey, #6c7a90);
+}
+
+.sectionHeader {
+		display: flex;
+		justify-content: space-between;
+}
+
+/* Add Field Button styling */
+.addFieldButton {
+	background: var(--colour-branding-action, #5c90df);
+	color: white;
+	border: none;
+	padding: 0.75rem 1.5rem;
+	border-radius: 6px;
+	font-size: 1rem;
+	cursor: pointer;
+	margin-bottom: 2rem;
+	transition: all 0.2s ease;
+}
+
+.addFieldButton:hover {
+	background: var(--colour-branding-action-hover, #364196);
+	transform: translateY(-1px);
+	box-shadow: 0 2px 4px rgba(92, 144, 223, 0.3);
+}
+
+.addFieldButton:focus {
+	outline: 2px solid var(--colour-branding-action, #5c90df);
+	outline-offset: 2px;
+}
+
+.addFieldButton:active {
+	transform: translateY(0);
+}
+
+/* Refresh button styling */
+.refreshButton {
+	margin-left: 10px;
+	padding: 2px 8px;
+	font-size: 12px;
+	background: var(--colour-dusk, #536280);
+	color: white;
+	border: none;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: background-color 0.2s ease;
+}
+
+.refreshButton:hover {
+	background: var(--colour-dusk-hover, #485968);
+}
+
+/* Error message container */
+.errorMessageContainer {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+/* Add Field Container - matches field structure */
+.addFieldContainer {
+	display: flex;
+	margin-top: 32px;
+}
+
+.fieldNumberContainer {
+	display: flex;
+	width: 40px;
+}
+
+/* Add Field Section */
+.addFieldSection {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+	justify-content: flex-start; /* Align to start to match field content */
+	margin-top: 0; /* Remove top margin since it's in the container */
+}
+
+/* Desktop: horizontal layout for field selector and button */
+@media (min-width: 769px) {
+	.addFieldSection {
+		flex-direction: row;
+		align-items: baseline;
+		gap: 2rem;
+		align-items: flex-start;
+		justify-content: flex-start; /* Align to start to match field content */
+	}
+}
+
+/* Help Section for Popup */
+.helpSection {
+	background-color: var(--colour-branding-action-superlight);
+	border: 1px solid var(--colour-branding-inactive);
+	border-radius: 8px;
+	padding: 1.5rem;
+	margin-bottom: 1.5rem;
+}
+
+.helpTitle {
+	color: var(--text-dark);
+	font-weight: 600;
+	margin-bottom: 0.75rem;
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 1.25rem;
+}
+
+.helpText {
+	color: var(--colour-branding-action);
+	line-height: 1.6;
+	font-size: 1.25rem;
+}
+
+/* Field Type Cards for Popup */
+.fieldTypeCards {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem; /* Spacing between vertical cards */
+	padding: 1rem 0;
+}
+
+/* Responsive layout: maintain vertical layout on all screen sizes */
+@media (min-width: 768px) {
+	.fieldTypeCards {
+		gap: 1.5rem; /* Slightly larger gap on desktop */
+	}
+}
+
+.fieldTypeCard {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	padding: 1.75rem 1.25rem; /* More vertical padding */
+	border: 1px solid var(--border-line-grey);
+	border-radius: 8px;
+	background-color: var(--bg-white);
+	cursor: pointer;
+	transition: all 0.2s ease;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+	min-height: 120px; /* Adjust height for horizontal layout */
+	gap: 1rem; /* Space between icon and content */
+}
+
+.fieldTypeCard:hover {
+	border-color: var(--text-light);
+	background-color: var(--bg-bluegrey);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.fieldTypeCard:focus {
+	outline: 2px solid var(--text-light);
+	outline-offset: 2px;
+}
+
+.fieldTypeCard:active {
+	transform: scale(0.98);
+	transition: transform 0.1s ease;
+}
+
+.fieldTypeCardIcon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 48px;
+	height: 48px;
+	margin-bottom: 0; /* Remove bottom margin for horizontal layout */
+	font-size: 20px;
+	flex-shrink: 0;
+	border: 1px solid var(--border-line-grey); /* Subtle border */
+	border-radius: 8px;
+	background-color: var(--bg-bluegrey);
+	padding: 8px;
+}
+
+
+.fieldTypeCardContent {
+	flex: 1;
+	width: 100%;
+	min-width: 0; /* Prevent content from overflowing */
+}
+
+.fieldTypeCardTitle {
+	margin: 0 0 0.25rem 0;
+	font-weight: 600;
+	font-size: 1.4rem; /* Increased for better readability */
+}
+
+.fieldTypeCardDescription {
+	margin: 0 0 0.75rem 0;
+	font-size: 1.6rem; /* Increased for better readability */
+	line-height: 1.5; /* Improved line height for better readability */
+}
+
+.fieldTypeCardUseCase {
+	margin: 0;
+	font-size: 1.4rem;
+	font-style: italic;
+	color: var(--text-light);
+	padding-top: 0.5rem;
+	border-top: 1px solid var(--border-line-grey);
+}
+
+/* Field selector and button container - horizontal layout */
+.addFieldSection> div:first-child {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+	flex: 1;
+}
+
+/* Container for add field button alignment */
+.addFieldButtonContainer {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+/* Empty State */
+.emptyState {
+	padding: 2rem;
+	text-align: center;
+	background-color: var(--bg-bluegrey, #f4f7f9);
+	border-radius: 8px;
+	border: 1px dashed var(--border-line-grey, #dbddf1);
+	margin-bottom: 1rem;
+}
+
+.emptyStateText {
+	color: var(--text-bluegrey, #6c7a90);
+	font-style: italic;
+}
+
+.fieldTypeSelector {
+	display: flex;
+	flex-direction: column;
+	max-width: 500px; /* Increased from 300px to accommodate longer text */
+	width: 100%;
+}
+
+@media (max-width: 768px) {
+	.addFieldSection {
+		align-items: stretch;
+	}
+	
+	.fieldTypeSelector {
+		max-width: none;
+	}
+}
+
+.grid__four {
+  max-width: 1200px;
+	display: grid;
+	grid-template-columns: repeat(2, minmax(250px, 1fr));
+  margin: 2rem 0;
+	gap: 2rem;
+	justify-items: center;
+}
+
+@media (max-width: 768px) {
+	.grid__four {
+		grid-template-columns: 1fr;
+		gap: 2rem;
+	}
+}
+
+/* Navigation styles */
+.navigation {
+	display: flex;
+	justify-content: space-between;
+	gap: 1rem;
+	margin-top: 3rem; /* Increase from 2rem */
+	padding-top: 2rem;
+	padding-bottom: 2rem; /* Add bottom padding */
+	border-top: 1px solid #e9ecef;
+}
+
+/* Single button alignment - align to right for overview step save button */
+.navigation> :only-child {
+	margin-left: auto;
+	margin-right: 0;
+}
+
+/* Two button alignment - one left, one right */
+.navigation> :first-child:not(:only-child) {
+	margin-right: auto;
+}
+
+.navigation> :last-child:not(:only-child) {
+	margin-left: auto;
+}
+
+/* Special case for overview step - align save button to right */
+.overviewStep .navigation> :only-child {
+	margin-left: auto;
+	margin-right: 0;
+}
+
+.previousButton {
+	background: #6c757d;
+	color: white;
+	border: none;
+	padding: 0.75rem 1.5rem;
+	border-radius: 6px;
+	font-size: 1rem;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.previousButton:hover {
+	background: #5a6268;
+}
+
+.saveButton {
+	background: var(--colour-purple, #6e79c5);
+	color: white;
+	border: none;
+	padding: 0.75rem 2rem;
+	border-radius: 6px;
+	font-size: 1rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.saveButton:hover:not(:disabled) {
+	background: var(--colour-purple-hover, #5a66b3);
+	transform: translateY(-1px);
+	box-shadow: 0 2px 4px rgba(110, 121, 197, 0.3);
+}
+
+.saveButton:focus {
+	outline: 2px solid var(--colour-purple, #6e79c5);
+	outline-offset: 2px;
+}
+
+.saveButton:disabled {
+	background: #6c757d;
+	cursor: not-allowed;
+	opacity: 0.65;
+	transform: none;
+	box-shadow: none;
+}
+
+.nextButton {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: white;
+	border: none;
+	padding: 0.75rem 2rem;
+	border-radius: 6px;
+	font-size: 1rem;
+	font-weight: 500;
+	cursor: pointer;
+	transition: all 0.2s ease;
+}
+
+.nextButton:hover:not(:disabled) {
+	transform: translateY(-2px);
+	box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.nextButton:disabled {
+	background: #6c757d;
+	cursor: not-allowed;
+	opacity: 0.65;
+	transform: none;
+	box-shadow: none;
+}
+
+
+
+.errorMessage {
+	color: var(--colour-red);
+	margin: 0.25rem 0;
+	padding: 0.25rem 0;
+	font-size: 0.875rem;
+	line-height: 1.4;
+}
+
+/* Layout option styles */
+.layoutOption {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	text-align: center;
+	cursor: pointer;
+	transition: all 0.2s ease;
+	background-color: transparent;
+}
+
+.layoutOptionImage {
+	width: 250px;
+	height: 250px;
+	border-radius: 12px;
+	overflow: hidden;
+	margin-bottom: 1rem;
+	border: 2px solid var(--border-line-grey, #dbddf1);
+	transition: all 0.2s ease;
+}
+
+.layoutOption.selected .layoutOptionImage {
+	border-color: var(--border-line-grey, #dbddf1);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.layoutOptionImg {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.layoutOptionContent {
+	max-width: 250px;
+}
+
+.layoutOptionTitle {
+	font-size: 1.6rem;
+	font-weight: 600;
+	margin: 0 0 0.5rem 0;
+	line-height: 1.3;
+	color: #333;
+}
+
+.layoutOptionDescription {
+	font-size: 1.2rem;
+	margin: 0;
+	line-height: 1.3;
+	color: #6c757d;
+}
+
+.layoutOption.hasError .layoutOptionImage {
+	border-color: var(--colour-red, #dc3545);
+}
+
+/* Field error styles */
+.fieldError {
+	color: #dc3545;
+	font-size: 1.6rem;
+	font-weight: 500;
+	margin-top: 0.5rem;
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+}
+
+.errorIcon {
+	font-size: 1rem;
+}
+
+/* Field wrapper styles are now handled in Fields.module.css */
+
+/* Field type indicator styles are now handled in Fields.module.css */
+
+@keyframes errorShake {
+	0%, 100% { transform: translateX(0); }
+	25% { transform: translateX(-3px); }
+	75% { transform: translateX(3px); }
+}
+
+@keyframes errorPulse {
+	0% { 
+		box-shadow: 0 1px 3px rgba(192, 39, 67, 0.1), 0 1px 2px rgba(192, 39, 67, 0.08);
+	}
+	50% { 
+		box-shadow: 0 2px 6px rgba(192, 39, 67, 0.2), 0 1px 3px rgba(192, 39, 67, 0.15);
+	}
+	100% { 
+		box-shadow: 0 1px 3px rgba(192, 39, 67, 0.1), 0 1px 2px rgba(192, 39, 67, 0.08);
+	}
+}
+
+.successMessage {
+	background: var(--colour-branding-secondary-light);
+	border: 1px solid var(--colour-branding-secondary);
+	border-radius: 8px;
+	padding: 1rem;
+	margin-top: 1rem;
+	color: var(--colour-green);
+	font-weight: 500;
+}
+
+/* Mode-aware styling */
+.createMode {
+	color: var(--colour-purple, #6e79c5);
+}
+
+.editMode {
+	color: var(--colour-branding-dark, #364196);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+	.content {
+		padding: 1.5rem 0 2.5rem 0; /* Maintain proper padding on mobile */
+	}
+	
+	.section {
+		margin-bottom: 1.5rem;
+	}
+	
+	/* Mobile: vertical layout for field selector and button */
+	.addFieldSection {
+		flex-direction: column;
+		align-items: stretch; /* Stretch to fill available space */
+	}
+	
+	/* Button should not be full width on mobile */
+	.addFieldSection Button {
+		width: auto; /* Let button use its natural width */
+		padding: 1rem 1.5rem; /* Keep proper padding but not full width */
+	}
+	
+	.addFieldButtonContainer {
+		align-items: stretch;
+		justify-content: stretch;
+		min-height: auto;
+	}
+	
+	.navigation {
+		flex-direction: column;
+		gap: 0.75rem;
+		justify-content: flex-start; /* Align to start on mobile */
+		margin-top: 2rem; /* Slightly reduce on mobile */
+		padding-top: 1.5rem;
+		padding-bottom: 1.5rem; /* Maintain bottom padding */
+	}
+	
+	/* Mobile button alignment - single button aligns right, two buttons stack */
+	.navigation> :only-child {
+		margin-left: auto;
+		margin-right: 0;
+	}
+	
+	.navigation> :first-child:not(:only-child),
+	.navigation> :last-child:not(:only-child) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	
+	.previousButton,
+	.nextButton,
+	.saveButton {
+		width: 100%;
+		padding: 1rem;
+	}
+}
+
+@media (max-width: 480px) {
+	.content {
+		padding: 1rem 0 2rem 0; /* Still maintain padding on small screens */
+	}
+	
+	.section {
+		margin-bottom: 1rem;
+	}
+	
+	.navigation {
+		margin-top: 1.5rem; /* Further reduce on very small screens */
+		padding-top: 1rem;
+		padding-bottom: 1.5rem;
+		justify-content: flex-start; /* Align to start on small screens */
+	}
+	
+	/* Small screen button alignment */
+	.navigation> :only-child {
+		margin-left: auto;
+		margin-right: 0;
+	}
+	
+	.navigation> :first-child:not(:only-child),
+	.navigation> :last-child:not(:only-child) {
+		margin-left: 0;
+		margin-right: 0;
+	}
+	
+	.errorMessageContainer {
+		flex-direction: column;
+		align-items: flex-start;
+		gap: 0.75rem;
+	}
+	
+	.refreshButton {
+		align-self: flex-end;
+	}
+}
+
+/* Full width content when sidebar is hidden */
+:global(.hub-contentWrapper.fullWidthContent) {
+	max-width: 1000px;
+	margin: 0 auto;
+	padding: 2rem;
+}
+
+.hub-contentWrapper--col {
+  flex-flow: column;
+}
+
+/* Validation error message - displayed at top of form */
+.validationErrorMessage {
+	background-color: var(--colour-branding-secondary-light);
+	border: 1px solid var(--colour-branding-secondary);
+	border-radius: 6px;
+	color: var(--colour-red);
+	padding: 12px 16px;
+	font-weight: 500;
+	font-size: 14px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+		margin: 24px 32px;
+}
+
+.validationErrorMessage::before {
+	content: "⚠";
+	font-size: 16px;
+	color: var(--colour-red);
+}
+
+/* Loading overlay for forms - deprecated, use SkeletonLoader instead */
+/*
+.loadingOverlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(2px);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 10;
+	border-radius: 8px;
+	animation: fadeIn 0.2s ease-in-out;
+}
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+*/
+
+/* Form header with buttons */
+.formHeader {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 16px;
+}
+
+/* Loading container for fields */
+.fieldsLoadingContainer {
+	text-align: center;
+	padding: 60px 20px;
+}
+
+/* Help note styling */
+.helpNote {
+	font-size: 13px;
+	color: #6c757d;
+}
+
+/* Loading container for overview */
+.overviewLoadingContainer {
+	text-align: center;
+	padding: 60px 20px;
+}
+
+/* Form layout header */
+.formLayoutHeader {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-bottom: 16px;
+}
+
+/* Section margins */
+.gridIconSection {
+	margin-bottom: 3rem;
+}
+
+.layoutSection {
+	margin-bottom: 2rem;
+}
+
+/* Grid icon loading state */
+.gridIconLoading {
+	grid-column: 1 / -1;
+}
+
+/* Hide upload button in grid icon section */
+.gridIconSection :global(.iconLoader__buttonOverlay button:first-child) {
+	display: none !important;
+}