@syncfusion/ej2-react-form-builder 0.1.0-beta → 35.1.37

package/styles/themes/preview.css

@@ -1,702 +0,0 @@
-.main-section {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--topbar-height));
-  background-color: rgb(var(--sf-color-background));
-  overflow: hidden;
-}
-
-.action-btn {
-  padding: 0.5rem 1rem;
-  border-radius: var(--border-radius);
-  font-size: var(--sf-font-size);
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.action-btn:hover {
-  background-color: var(--dragover-background-color);
-}
-
-.main-content {
-  flex: 1;
-  overflow-y: auto;
-  margin-top: 48px;
-  scrollbar-width: thin;
-  background-color: rgb(var(--sf-color-background));
-}
-
-/* Form Preview Area */
-.form-preview-area {
-  min-width: 100%;
-  width: fit-content;
-  background: var(--preview-area-color);
-  min-height: 100%;
-  padding: 1.5rem 2.5rem 1.5rem 2.5rem;
-  transition: background-color 0.2s ease;
-}
-
-.builder-container.e-component .form-preview-area:has(.empty-state) {
-  height: 100%;
-}
-
-.preview-main-content .form-preview-area {
-  height: calc(100dvh - 96px);
-  overflow-y: auto;
-}
-
-.builder-container.e-component .preview-main-content .form-preview-area {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.preview-main-content .form-renderer-container {
-  background-color: var(--sf-bg-color);
-}
-
-.form-preview-area.dragging-over .empty-state .form-dropzone {
-  border: 2px dashed var(--dragover-border-color);
-  background: var(--dragover-background-color);
-} 
-
-.form-preview-area.empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.empty-state {
-  background: var(--form-container-bg);
-  padding: 30px;
-  min-height: calc(100dvh - var(--topbar-height) - 6rem);
-  margin: 0 auto;
-  text-align: center;
-  align-content: center;
-  overflow-x: auto;
-  overflow-y: hidden;
-  width: var(--form-width)
-}
-
-.builder-container.e-component .empty-state {
-  min-height: unset;
-  height: 100%;
-}
-
-
-.empty-state p {
-  margin: 0;
-}
-
-.form-components {
-  background: var(--form-container-bg);
-  padding: 30px;
-  padding-bottom: 40px;
-  min-height: calc(100% - var(--topbar-height) - 6rem);
-  margin: 0 auto;
-  overflow-x: auto;
-  overflow-y: hidden;
-  display: flex;
-  max-width: var(--form-width);
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-.builder-container.e-component .form-components {
-  min-height: unset;
-  height: 100%;
-}
-
-.form-renderer-container {
-  margin: 0 auto;
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: calc(100dvh - var(--topbar-height) - 6rem);
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Field content wrapper for label positioning */
-.field-content {
-  display: flex;
-  width: 100%;
-}
-
-.field-content.label-top {
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.field-content.label-bottom {
-  flex-direction: column-reverse;
-  gap: 0.5rem;
-}
-
-.field-content.label-left {
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem;
-}
-
-.field-content.label-right {
-  flex-direction: row-reverse;
-  align-items: center;
-  gap: 1rem;
-  justify-content: flex-end;
-}
-
-/* When label is left/right, input should flex-grow */
-.field-content.label-left .field-input,
-.field-content.label-right .field-input {
-  flex: 1;
-  min-width: 0;
-}
-
-.field-label {
-  font-size: var(--sf-font-size);
-  font-weight: 500;
-  color: var(--jsonview-text-color);
-  margin: 0;
-  cursor: pointer;
-  flex-shrink: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.field-description {
-  font-size: var(--sf-font-size-sm);
-  color: var(--jsonview-text-color);
-}
-
-.field-content:not(.layout-component):has(.e-small:not(.e-btn)) .field-label {
-  font-size: var(--sf-font-size-sm);
-}
-
-.field-content:not(.layout-component):has(.e-small:not(.e-btn)) .field-description {
-  font-size: var(--sf-font-size-xs);
-}
-
-/* bigger */
-.field-content:not(.layout-component):has(.e-bigger:not(.e-btn)) .field-label {
-  font-size: var(--sf-font-size-lg);
-}
-
-.field-content:not(.layout-component):has(.e-bigger:not(.e-btn)) .field-description {
-  font-size: var(--sf-font-size);
-}
-
-
-.field-label .required {
-  color: #ef4444;
-  margin-left: 0.25rem;
-}
-
-.field-input {
-  width: 100%;
-}
-
-.field-input .e-switch-wrapper,
-.field-input .e-checkbox-wrapper {
-  margin: 5px;
-  margin-left: 0px;
-}
-
-/* Split View Container */
-.split-view-container {
-  padding: 30px 60px ;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--preview-area-color);
-  overflow: hidden;
-}
-
-.builder-container.e-component .split-view-container {
-  height: 100%;
-}
-
-.split-header {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.75rem 1.25rem;
-  background-color: #2d2d2d;
-  border-bottom: 1px solid #3d3d3d;
-}
-
-.download-btn {
-  padding: 0.5rem 1.25rem;
-  font-size: 0.875rem;
-  border: 1px solid var(--dragover-border-color);
-  border-radius: 0.375rem;
-  background-color: #3d3d3d;
-  color: #e0e0e0;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  font-weight: 500;
-}
-
-.download-btn:hover {
-  border-color: #4fc3f7;
-  background-color: var(--dragover-border-color);
-  color: #ffffff;
-}
-
-.split-panels {
-  flex: 1;
-  display: grid;
-  border-radius: 12px;
-  grid-template-columns: 1fr;
-  gap: 0;
-  overflow: hidden;
-}
-
-.split-panel {
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--jsonview-border-color);
-  overflow: hidden;
-}
-
-.split-panel:last-child {
-  border-right: none;
-}
-
-.split-panel .json-header {
-  background-color: var(--jsonview-header-color);
-  border-bottom: 1px solid var(--jsonview-border-color);
-  height: 48px;
-  padding: 0.875rem 1rem;
-}
-
-.split-panel .json-title {
-  color: rgb(var(--sf-color-on-surface));
-  font-size: 0.875rem;
-}
-
-.split-panel .json-title::before {
-  font-size: 1rem;
-}
-
-.split-panel .json-content {
-  flex: 1;
-  font-size: 12px;
-  padding: 1rem;
-}
-
-/* JSON Viewer */
-.json-viewer {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.json-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  background-color: #2d2d2d;
-  border-bottom: 1px solid #3d3d3d;
-}
-
-.json-title {
-  font-size: 1rem;
-  font-weight: 500;
-  color: #ffffff;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.json-title::before {
-  content: '{ }';
-  font-size: 1.125rem;
-}
-
-.json-content {
-  flex: 1;
-  margin: 0;
-  padding: 1.25rem;
-  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--jsonview-text-color);
-  background-color: rgb(var(--sf-color-surface));
-  overflow: auto;
-  white-space: pre;
-  word-wrap: normal;
-}
-
-/* Syncfusion Component Overrides */
-.field-input .e-input-group,
-.field-input .e-control-wrapper {
-  width: 100%;
-}
-
-.field-input .e-float-input {
-  width: 100%;
-}
-
-/* Light mode - JSON viewer stays dark themed */
-[data-theme="light"] .json-viewer {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-/* Radio Button Group */
-.form-field .field-input>.e-radio {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.form-field .e-radio+label {
-  margin-left: 0.5rem;
-}
-
-
-
-/* Layout Component Styles */
-.form-panel {
-  border: 1px solid rgb(var(--sf-color-line-color));
-  border-radius: var(--border-radius);
-  padding: 0;
-  margin: 0;
-}
-
-.panel-legend {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: var(--jsonview-text-color);
-  padding: 0 0.5rem;
-  margin-left: 0.5rem;
-}
-
-.panel-drop-zone,
-.tab-drop-zone {
-  padding: 0.8rem;
-  border: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
-  border-radius: var(--border-radius);
-  margin: 0.5rem;
-  transition: all 0.2s ease;
-  background-color: rgba(var(--sf-color-surface), 0.5);
-}
-
-.panel-drop-zone.empty,
-.tab-drop-zone.empty {
-  min-height: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.table-cell.drop-zone:has(> .drop-zone-text) {
-  align-content: center;
-  text-align: center;
-  height: 100px;
-  padding: 1rem;
-}
-
-.panel-drop-zone.dragging-over.empty,
-.tab-drop-zone.dragging-over.empty {
-  border-color: var(--dragover-border-color);
-  background-color: var(--dragover-background-color);
-}
-
-.panel-children {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.panel-child-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.drop-zone-text {
-  color: var(--jsonview-text-color);
-  opacity: 0.5;
-  font-size: 0.875rem;
-  margin: 0;
-}
-
-/* Table Layout */
-.form-table {
-  width: 100%;
-  border: 1px solid rgb(var(--sf-color-line-color));
-  border-radius: var(--border-radius);
-  overflow-x: auto;
-}
-
-.table-grid {
-  display: table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0px; 
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-.row {
-  display: table-row;
-  background: transparent;
-}
-
-.col,  [class^="col-"] {
-  display: table-cell;
-  vertical-align: top;
-  min-height: 100%;
-}
-
-.col {
-  width: auto;
-}
-.col-1 {
-  width: 8.33333333%;
-}
-.col-2 {
-  width: 16.66666667%;
-}
-.col-3 {
-  width: 25%;
-}
-.col-4 {
-  width: 33.33333333%;
-}
-.col-5 {
-  width: 41.66666667%;
-}
-.col-6 {
-  width: 50%;
-}
-.col-7 {
-  width: 58.33333333%;
-}
-.col-8 {
-  width: 66.66666667%;
-}
-.col-9 {
-  width: 75%;
-}
-.col-10 {
-  width: 83.33333333%;
-}
-.col-11 {
-  width: 91.66666667%;
-}
-.col-12 {
-  width: auto;
-}
-
-.table-row {
-  border-bottom: 1px solid rgb(var(--sf-color-line-color));
-}
-
-.table-row:last-child {
-  border-bottom: none;
-}
-
-.table-cell {
-  padding: .8rem;
-  border-right: 1px solid rgb(var(--sf-color-line-color));
-  align-items: center;
-}
-
-.table-cell:last-child {
-  border-right: none;
-}
-
-.table-cell.drop-zone {
-  border: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
-  background-color: rgba(var(--sf-color-surface), 0.5);
-  transition: all 0.2s ease;
-}
-
-.table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
-  border-color: var(--dragover-border-color);
-  background-color: var(--dragover-background-color);
-  border-width: 2px;
-}
-
-.table-row:last-child .table-cell.drop-zone {
-  border-bottom: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
-}
-
-.table-row:last-child .table-cell.drop-zone.dragging-over:has(.drop-zone-text) {
-  border-bottom: 2px dashed var(--dragover-border-color);
-}
-
-/* Nested components in table cells */
-.table-cell .nested-components {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.table-cell .nested-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.table-cell .nested-field-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--jsonview-text-color);
-  cursor: pointer;
-  margin: 0;
-}
-
-.table-cell .nested-field-label .required {
-  color: #ef4444;
-  margin-left: 0.25rem;
-}
-
-.table-cell .nested-field-input {
-  width: 100%;
-}
-
-/* Tabs Layout with Syncfusion */
-.form-tabs {
-  width: 100%;
-}
-
-.form-tabs .e-content {
-  padding: 0;
-}
-
-.form-tabs .e-content .e-item {
-  padding: 0;
-}
-
-.tab-drop-zone {
-  padding: .8rem;
-  border: 2px dashed rgba(var(--sf-color-on-surface-variant), 0.3);
-  border-radius: var(--border-radius);
-  display: flex;
-  flex-direction: column;
-  transition: all 0.2s ease;
-  background-color: rgba(var(--sf-color-surface), 0.5);
-}
-
-.tab-drop-zone.empty {
-  align-items: center;
-  justify-content: center;
-}
-
-.tab-children {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.tab-child-field {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Layout components inside other layouts - no label */
-.panel-child-field .field-input>.form-panel,
-.panel-child-field .field-input>.form-table,
-.panel-child-field .field-input>.form-tabs-container,
-.tab-child-field .field-input>.form-panel,
-.tab-child-field .field-input>.form-table,
-.tab-child-field .field-input>.form-tabs-container,
-.nested-field-input>.form-panel,
-.nested-field-input>.form-table,
-.nested-field-input>.form-tabs-container {
-  margin-top: 0;
-}
-
-.form-field-draggable.is-being-dragged .panel-drop-zone:hover,
-.form-field-draggable.is-being-dragged .tab-drop-zone:hover,
-.form-field-draggable.is-being-dragged .table-cell:hover {
-  border-color: rgba(var(--sf-color-on-surface-variant), 0.3) !important;
-  background-color: transparent !important;
-}
-
-
-.e-tooltip .e-msg-icon::before {
-  content: "\e800";
-  font-family: "e-icons";
-  color: var(--color-sf-msg-icon-color);
-  font-size: 16px;
-  height: 16px;
-  margin: 3px 4px;
-  display: flex;
-  line-height: 16px;
-}
-
-.e-dropdown-popup {
-  background: transparent;
-  z-index: 9999;
-}
-
-.e-dropdown-popup ul {
-  background-color: rgb(var(--sf-color-background));
-}
-
-.e-control.e-dialog {
-  overflow: auto;
-}
-
-.e-dialog .e-dlg-header {
-  width: 97%;
-}
-
-.e-dlg-header .db-dialog * {
-  font-size: 14px;
-}
-
-.e-dlg-header .db-dialog {
-  padding: 0px 18px;
-}
-
-.e-card .e-card-content {
-  padding: 10px !important;
-}
-
-.e-card > .e-card-content > .panel-drop-zone {
-  margin: 0px;
-}
-
-.e-tab:not(.custom-tab) .e-content > .e-item.e-active {
-  height: calc(100dvh - var(--topbar-height) - var(--topbar-height) - 6rem);
-  scrollbar-color: var(--scrollbar-thumb-hover) rgb(var(--sf-color-background));
-}
-
-.preview-main-content .e-tab:not(.custom-tab) .e-content > .e-item.e-active {
-  height: unset;
-}
-
-.builder-container.e-component .e-tab:not(.custom-tab)  .e-content > .e-item.e-active {
-  height: 100%;
-}
-
-#radiogroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-@container (max-width: 820px) {
-    .form-preview-area {
-      padding-left: 10px;
-      padding-right: 10px;
-    }
-    .split-view-container {
-      padding: 30px 20px;
-    }
-}