Enhancement/add more classes

resources/css/components/form-builder.css

@@ -0,0 +1,282 @@
+.form-builder__breadcrumbs {
+    @apply flex gap-4 mb-1 px-6 items-center;
+}
+
+.form-builder__breadcrumb-link {
+    @apply cursor-pointer;
+}
+
+.form-builder__breadcrumb-current {
+    @apply text-sm font-semibold;
+}
+
+.form-builder__header {
+    @apply flex justify-between items-center mb-6 px-6;
+}
+
+.form-builder__page-title {
+    @apply text-gray-900 text-[30px] font-semibold;
+}
+
+.form-builder__btn {
+    @apply inline-block cursor-pointer;
+}
+
+.form-builder__btn--preview {
+    @apply rounded-full px-3 py-2 text-sm text-gray-700 font-semibold border border-gray-300 hover:bg-gray-200;
+}
+
+.form-builder__btn-label {
+    @apply flex gap-1 items-center;
+}
+
+.form-builder__icon {
+    @apply w-5 h-5;
+}
+
+.form-builder__icon--spin {
+    @apply w-5 h-5 animate-spin text-white;
+}
+
+.form-builder-preview-container {
+    @apply px-6;
+}
+
+.form-builder-preview__title {
+    @apply pb-6 text-xl font-semibold text-gray-900;
+}
+
+.form-builder__field-label {
+    @apply mb-1;
+}
+
+.form-builder__field-error {
+    @apply text-red-600 text-sm mt-0.5 inline-block;
+}
+
+.form-builder__field-hint {
+    @apply text-gray-600 text-sm mt-0.5 inline-block;
+}
+
+.form-builder__field-group {
+    @apply mt-2;
+}
+
+.form-builder__layout {
+    @apply flex;
+}
+
+.form-builder__sidebar {
+    @apply flex w-1/3 flex-col;
+}
+
+.form-builder__status-panel {
+    @apply p-6 mb-4 bg-gray-50 shadow-sm rounded-xl;
+}
+
+.form-builder__status-heading {
+    @apply mb-5;
+}
+
+.form-builder__status-list {
+    @apply space-y-3;
+}
+
+.form-builder__status-badge {
+    @apply px-3 py-1 text-sm text-gray-700 border font-medium border-warning-200 bg-warning-50 text-warning-700 rounded-full flex w-fit items-center gap-2;
+}
+
+.form-builder__status-badge--published {
+    @apply !text-success-700 !bg-success-50 !border-success-200;
+}
+
+.form-builder__meta {
+    @apply flex flex-col text-sm font-normal text-gray-900 gap-1;
+}
+
+.form-builder__meta-value {
+    @apply text-base;
+}
+
+.form-builder__component-icon {
+    @apply relative;
+}
+
+.form-builder__tooltip {
+    @apply absolute hidden bg-black text-white text-sm rounded px-4 py-2 -top-16 left-0 w-[200px];
+}
+
+.form-builder__component-icon:hover .form-builder__tooltip {
+    @apply block;
+}
+
+.form-builder__actions {
+    @apply sticky bottom-0 flex justify-between items-center text-sm font-semibold w-fill h-[56px] py-2 px-6 z-50 mt-[22px] bg-gray-200;
+}
+
+.form-builder__actions-group {
+    @apply flex gap-2;
+}
+
+.form-builder__btn--discard {
+    @apply text-error-500 hover:text-error-700;
+}
+
+.form-builder__btn--draft {
+    @apply rounded-full border border-brand-300 text-brand-700 hover:bg-brand-700 hover:text-white px-3 py-[7px];
+}
+
+.form-builder__btn--publish {
+    @apply rounded-full bg-brand-400 hover:bg-brand-700 text-white px-3 py-[7px];
+}
+
+.form-builder__btn-loading {
+    @apply flex items-center gap-2;
+}
+
+.form-builder-container {
+    @apply relative mb-1 px-6;
+
+    .form-builder {
+        @apply w-full flex flex-row h-[85vh] overflow-hidden;
+
+        .form-builder-templates {
+            @apply flex flex-col rounded-xl bg-gray-200 p-6 h-fit w-full overflow-y-auto;
+
+            .heading {
+                @apply pb-5 flex flex-col gap-1;
+
+                h3 {
+                    @apply text-lg font-semibold text-gray-900;
+                }
+
+                p {
+                    @apply text-sm text-gray-500;
+                }
+            }
+
+            .components {
+                @apply flex flex-col gap-2;
+                li {
+                    @apply list-none bg-white p-3 rounded-lg text-sm font-semibold text-gray-900 hover:bg-brand-700 hover:text-white flex gap-1 flex-row items-center cursor-pointer;
+                }
+            }
+        }
+
+        .form-builder-fields {
+            @apply flex flex-col rounded-xl w-2/3 pr-4 space-y-4;
+
+            .settings {
+                @apply bg-gray-50 shadow-sm rounded-xl px-6 py-4;
+
+                h3 {
+                    @apply text-lg font-semibold text-gray-900 mb-3 mt-2;
+                }
+            }
+
+            [type="text"],
+            [type="email"],
+            [type="url"],
+            [type="password"],
+            [type="number"],
+            [type="date"],
+            [type="tel"],
+            [multiple],
+            textarea,
+            select {
+                @apply text-base block w-full rounded-lg border border-gray-300 !border-double placeholder:text-gray-400 focus:border-sky-300 focus:ring focus:ring-sky-200/50 py-2 px-3;
+
+                > option {
+                    @apply text-gray-400;
+                }
+            }
+        }
+    }
+}
+
+.fields {
+    @apply flex flex-col rounded-xl text-sm overflow-y-auto;
+
+    h3 {
+        @apply text-lg font-semibold text-gray-900 mb-2;
+    }
+
+    .draggable {
+        @apply relative space-y-2 h-[100vh];
+
+        &--has-fields {
+            @apply !border-none !shadow-none;
+        }
+
+        .-field {
+            @apply px-6 py-4 bg-gray-50 shadow-sm rounded-xl mb-2;
+
+            .-field-title {
+                @apply border-b border-gray-200 text-lg;
+            }
+
+            .handle {
+                @apply flex justify-between pb-4;
+
+                .-title {
+                    .-type-title {
+                        @apply text-lg font-semibold text-gray-900;
+                    }
+                }
+            }
+
+            .-field-properties {
+                @apply space-y-2 mt-6;
+
+                .-two-columns {
+                    @apply grid grid-cols-2 gap-2;
+                }
+
+                .-prop {
+                    @apply flex gap-1.5 flex-col;
+
+                    > span {
+                        @apply text-sm text-gray-700 font-medium;
+                    }
+
+                    .-label {
+                        @apply text-gray-700;
+                    }
+                }
+
+                .-options {
+                    @apply relative !mt-4;
+
+                    .-added {
+                        @apply flex flex-col gap-2;
+                    }
+
+                    .-option {
+                        @apply flex items-center;
+                    }
+                }
+            }
+        }
+
+        [type="text"],
+        [type="email"],
+        [type="url"],
+        [type="password"],
+        [type="number"],
+        [type="date"],
+        [type="tel"],
+        [multiple],
+        textarea,
+        select {
+            @apply text-base block w-full rounded-lg border border-gray-300 !border-double placeholder:text-gray-400 focus:border-sky-300 focus:ring focus:ring-sky-200/50 py-2 px-3;
+
+            > option {
+                @apply text-gray-400;
+            }
+        }
+    }
+}
+
+.dragging-item {
+    @apply bg-brand-700 p-3 rounded-xl text-sm font-semibold text-white;
+}