@insticc/genericform 1.0.10 → 2.0.0

package/build/index.css

@@ -1,18 +1,456 @@
-.form-columns {
-  display: flex;
-  flex-direction: row;
-  gap: 2rem;
-  align-items: flex-start;
-  flex-wrap: wrap;
+/* ==========================================================================
+   Merged CSS — Bootstrap Modal fixes + FormGeneric component styles
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   CSS Custom Properties
+   -------------------------------------------------------------------------- */
+:root {
+	--ufg-primary: #1d4ed8;
+	--ufg-primary-dark: #1e40af;
+	--ufg-primary-darker: #1e3a8a;
+	--ufg-error: #dc2626;
+	--ufg-border: #cbd5e1;
+	--ufg-bg: #ffffff;
+	--ufg-surface: #fafafa;
+	--ufg-text: #111111;
+	--ufg-text-secondary: #6b7280;
+	--ufg-radius: 10px;
+	--ufg-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
+}
+
+/* --------------------------------------------------------------------------
+   Bootstrap Modal conflict fixes
+   These rules must come AFTER any third-party CSS imports
+   (Semantic UI, Tailwind, etc.) to prevent .fade overrides.
+   -------------------------------------------------------------------------- */
+
+/* Fix: some CSS frameworks redefine .fade and keep opacity:0,
+   which makes the modal invisible while the backdrop still shows. */
+.modal.fade.show {
+	opacity: 1 !important;
+}
+
+/* Fix: ensure the transition itself is preserved for smooth open/close */
+.modal.fade {
+	transition: opacity 0.15s linear;
+}
+
+/* Fix: duplicated class names (modal-header modal-header, modal-title modal-title)
+   are harmless visually but indicate a component wrapper conflict —
+   these rules make sure layout is not broken regardless. */
+.modal-header {
+	border-bottom: 1px solid #e5e7eb;
+	padding: 20px 32px;
 }
 
-.form-column {
-  width: fit-content;
-  min-width: 200px;
+.modal-title {
+	font-weight: bold;
+	font-size: 1.4rem;
+	color: #111827;
 }
 
+/* --------------------------------------------------------------------------
+   Container
+   -------------------------------------------------------------------------- */
+.ufg-container {
+	width: 100%;
+	background: var(--ufg-bg);
+	border-radius: 14px;
+	padding: 32px;
+	box-shadow: var(--ufg-shadow);
+	border: 1px solid #d1d5db;
+	box-sizing: border-box;
+}
+
+.ufg-modal-body {
+	padding: 24px 32px;
+	background: var(--ufg-bg);
+}
+
+/* --------------------------------------------------------------------------
+   Typography
+   -------------------------------------------------------------------------- */
+.ufg-title {
+	font-size: 24px;
+	font-weight: 700;
+	color: var(--ufg-text);
+	margin-bottom: 24px;
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+/* --------------------------------------------------------------------------
+   Form layout
+   -------------------------------------------------------------------------- */
+.ufg-form-columns {
+	display: flex;
+	flex-direction: row;
+	gap: 2rem;
+	align-items: flex-start;
+	flex-wrap: wrap;
+}
+
+.ufg-form {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.ufg-field-group {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+
+.ufg-field-row {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+	gap: 16px;
+}
+
+/* --------------------------------------------------------------------------
+   Labels
+   -------------------------------------------------------------------------- */
+.ufg-label {
+	font-size: 14px;
+	font-weight: 600;
+	color: #1f2937;
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin: 0;
+}
+
+.ufg-required {
+	color: var(--ufg-error);
+}
+
+/* --------------------------------------------------------------------------
+   Inputs, Textareas, Selects
+   -------------------------------------------------------------------------- */
+.ufg-input,
+.ufg-textarea,
+.ufg-select {
+	width: 100%;
+	border: 2px solid var(--ufg-border);
+	border-radius: var(--ufg-radius);
+	padding: 12px 14px;
+	font-size: 15px;
+	box-sizing: border-box;
+	outline: none;
+	color: var(--ufg-text);
+	background: var(--ufg-surface);
+	transition: all 0.12s ease;
+	font-family: inherit;
+}
+
+.ufg-input:hover,
+.ufg-textarea:hover,
+.ufg-select:hover {
+	background: #f3f4f6;
+}
+
+.ufg-input:focus,
+.ufg-textarea:focus,
+.ufg-select:focus {
+	border-color: var(--ufg-primary);
+	background: var(--ufg-bg);
+	box-shadow: 0 0 0 4px rgba(29, 78, 216, 0.25);
+}
+
+.ufg-input:disabled,
+.ufg-textarea:disabled,
+.ufg-select:disabled {
+	background: #f3f4f6;
+	color: var(--ufg-text-secondary);
+	cursor: not-allowed;
+}
+
+.ufg-input.error,
+.ufg-textarea.error,
+.ufg-select.error {
+	border-color: var(--ufg-error);
+}
+
+.ufg-select[multiple] {
+	min-height: 120px;
+	padding: 10px;
+}
+
+.ufg-select option {
+	padding: 6px 8px;
+}
+
+/* --------------------------------------------------------------------------
+   Textarea
+   -------------------------------------------------------------------------- */
+.ufg-textarea {
+	min-height: 100px;
+	resize: vertical;
+}
+
+/* --------------------------------------------------------------------------
+   Error & Helper text
+   -------------------------------------------------------------------------- */
+.ufg-error-message {
+	color: var(--ufg-error);
+	font-size: 12px;
+	margin-top: 4px;
+	font-weight: 500;
+}
+
+.ufg-tooltip {
+	font-size: 12px;
+	color: var(--ufg-text-secondary);
+	font-style: italic;
+	margin-top: 4px;
+}
+
+.ufg-help-icon {
+	cursor: help;
+	color: var(--ufg-text-secondary);
+}
+
+.ufg-date-input {
+	position: relative;
+}
+
+/* --------------------------------------------------------------------------
+   Checkboxes & Radios
+   -------------------------------------------------------------------------- */
+.ufg-checkbox-group,
+.ufg-radio-group {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.ufg-radio-group-inline {
+	display: flex;
+	flex-direction: row;
+	margin: 0;
+	gap: 20px;
+}
+
+.ufg-checkbox-item,
+.ufg-radio-item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 0;
+}
+
+.ufg-checkbox-item input,
+.ufg-radio-item input {
+	width: 18px;
+	height: 18px;
+	cursor: pointer;
+	margin: 0;
+}
+
+.ufg-checkbox-item label,
+.ufg-radio-item label {
+	font-size: 14px;
+	font-weight: 400;
+	cursor: pointer;
+	margin: 0;
+}
+
+/* --------------------------------------------------------------------------
+   Toggle
+   -------------------------------------------------------------------------- */
+.ufg-toggle-wrapper {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.ufg-toggle-track {
+	width: 44px;
+	height: 24px;
+	border-radius: 12px;
+	background: #ccc;
+	cursor: pointer;
+	position: relative;
+	transition: background 0.2s;
+	flex-shrink: 0;
+}
+
+.ufg-toggle-track.active {
+	background: #4f46e5;
+}
+
+.ufg-toggle-track.disabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+}
+
+.ufg-toggle-thumb {
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: white;
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	transition: transform 0.2s;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.ufg-toggle-track.active .ufg-toggle-thumb {
+	transform: translateX(20px);
+}
+
+/* --------------------------------------------------------------------------
+   Actions & Buttons
+   -------------------------------------------------------------------------- */
+.ufg-actions {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: 2rem;
+	margin-top: 24px;
+	flex-wrap: wrap;
+}
+
+.ufg-button {
+	padding: 12px 24px;
+	border-radius: var(--ufg-radius);
+	font-weight: 600;
+	font-size: 15px;
+	cursor: pointer;
+	border: 2px solid transparent;
+	transition: all 0.12s ease;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 120px;
+	justify-content: center;
+	background: none;
+}
+
+.ufg-button-primary {
+	background: var(--ufg-primary);
+	border-color: var(--ufg-primary-dark);
+	color: #ffffff;
+	box-shadow: 0 6px 20px rgba(29, 78, 216, 0.25);
+}
+
+.ufg-button-primary:hover:not(:disabled) {
+	background: var(--ufg-primary-dark);
+	border-color: var(--ufg-primary-darker);
+	transform: translateY(-1px);
+}
+
+.ufg-button-secondary {
+	background: #e5e7eb;
+	color: var(--ufg-text);
+	border-color: #9ca3af;
+}
+
+.ufg-button-secondary:hover:not(:disabled) {
+	background: #d1d5db;
+	border-color: #6b7280;
+	transform: translateY(-1px);
+}
+
+.ufg-button:disabled {
+	background: #94a3b8;
+	border-color: #94a3b8;
+	color: #e2e8f0;
+	cursor: not-allowed;
+	opacity: 0.7;
+}
+
+/* --------------------------------------------------------------------------
+   Separator
+   -------------------------------------------------------------------------- */
+.ufg-separator {
+	border: 0;
+	border-top: 2px solid #e5e7eb;
+	margin: 10px 0;
+}
+
+/* --------------------------------------------------------------------------
+   Accordion
+   -------------------------------------------------------------------------- */
+
+.ef-accordion {
+	border: none !important;
+	box-shadow: none !important;
+}
+
+.ef-accordion .title {
+	font-weight: 600;
+	font-size: 15px;
+	padding: 14px 18px !important;
+	background: #f8f9fa;
+	border-radius: 10px;
+	margin-bottom: 6px;
+	transition: background 0.15s ease;
+}
+
+.ef-accordion .title:hover {
+	background: #e5e7eb;
+}
+
+.ef-accordion .title.active {
+	background: #1d4ed8;
+	color: white;
+}
+
+.ef-accordion .title .icon {
+	margin-right: 10px;
+}
+
+.ef-accordion .content {
+	padding: 16px 18px !important;
+	border-radius: 10px;
+	background: #fafafa;
+	margin-bottom: 10px;
+}
+
+.ef-accordion-content {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.ef-info-row {
+	display: flex;
+	justify-content: space-between;
+	gap: 12px;
+	font-size: 14px;
+}
+
+.ef-info-row strong {
+	color: #374151;
+}
+
+.ef-info-row span {
+	color: #111827;
+}
+
+
+/* --------------------------------------------------------------------------
+   Misc wrappers
+   -------------------------------------------------------------------------- */
+.ufg-component-wrapper {
+	margin: 10px 0;
+}
+
+/* --------------------------------------------------------------------------
+   Responsive
+   -------------------------------------------------------------------------- */
 @media (max-width: 768px) {
-  .form-columns {
-    flex-direction: column;
-  }
+	.ufg-container {
+		padding: 20px 10px;
+	}
+
+	.ufg-field-row {
+		grid-template-columns: 1fr;
+	}
 }