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

package/styles/themes/left-pane.css

@@ -0,0 +1,253 @@
+.left-pane {
+  width: var(--sidebar-width);
+  height: calc(100dvh - var(--topbar-height) - 3rem);
+  background-color: rgb(var(--sf-color-surface));
+  border-right: 1px solid rgb(var(--sf-color-line-color));
+  overflow-y: auto;
+  transition: transform .5s ease-in-out, width .5s ease-in-out;
+  margin-top: 48px;
+  scrollbar-width: thin;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.builder-container.e-component .left-pane {
+  height: calc(100% - var(--topbar-height));
+}
+
+.left-pane.collapsed {
+  transform: translateX(-100%);
+  border-right: none;
+  width: 0;
+}
+
+.e-rtl .left-pane.collapsed {
+  transform: translateX(100%);
+  border-left: none;
+  border-right: initial;
+  width: 0;
+}
+
+.left-pane .e-accordion {
+  border: none;
+  background: rgb(var(--sf-color-surface)) !important;
+}
+
+
+.left-pane .e-accordion .e-acrdn-item {
+  margin-bottom: 12px;
+  border-bottom: none !important;
+}
+
+.left-pane .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
+  background: rgb(var(--sf-color-surface)) !important;
+}
+
+.left-pane .e-accordion .e-acrdn-item .e-acrdn-panel .e-acrdn-content {
+  padding: 12px 0 0 0;
+}
+
+.palette-container {
+  padding: 0.75rem;
+  scrollbar-width: thin;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.palette-items {
+  display: flex;
+  flex-direction: row;
+  gap: 0.8rem;
+  flex-wrap: wrap;
+}
+
+.palette-item {
+  display: flex;
+  flex-direction: column;
+  width: 7.625rem;
+  min-height: 4.5rem;
+  height: auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 0.45rem;
+  background-color: rgb(var(--sf-color-background));
+  border: 1px solid rgb(var(--sf-color-line-color));
+  border-radius: 0.375rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.palette-items > * {
+  flex: 0 0 calc(50% - 0.45rem); /* 2 items per row (adjust for gap) */
+}
+
+
+.palette-item:hover, .palette-item:focus-visible {
+  border-color: #4a4a4a;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.palette-item:active {
+  cursor: grabbing;
+  opacity: 0.7;
+}
+
+.palette-item-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.palette-item-icon-svg {
+  color: var(--hint-text-color);
+  opacity: 0.8;
+  transition: all 0.2s ease;
+}
+
+.palette-item:hover .palette-item-icon-svg,
+.palette-item:focus-visible .palette-item-icon-svg {
+  color: #4a4a4a;
+  opacity: 1;
+}
+
+.palette-item-label {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--dashboard-heading-color);
+  line-height: 16px;
+  letter-spacing: 0%;
+  text-align: center;
+}
+
+/* Dark mode specific styles */
+[data-theme="dark"] .palette-item-icon-svg {
+  color: rgb(var(--sf-color-on-surface));
+  opacity: 0.9;
+}
+
+[data-theme="dark"] .palette-item:hover .palette-item-icon-svg {
+  color: #9e9e9e;
+  opacity: 1;
+}
+
+/* Scrollbar styling */
+.left-pane::-webkit-scrollbar {
+  width: 8px;
+}
+
+.left-pane::-webkit-scrollbar-track {
+  background: rgb(var(--sf-color-surface));
+}
+
+.left-pane::-webkit-scrollbar-thumb {
+  background: rgb(var(--sf-color-on-surface-variant));
+  border-radius: 4px;
+  opacity: 0.3;
+}
+
+.left-pane::-webkit-scrollbar-thumb:hover {
+  background: rgb(var(--sf-color-on-surface));
+  opacity: 0.5;
+}
+
+.template-item:hover {
+  border-color: #4a4a4a;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.template-item:active {
+  cursor: grabbing;
+  opacity: 0.7;
+}
+
+.listbox-pane-wrapper {
+  z-index: 1099;
+}
+
+.listbox-pane-popup {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1100;
+  width: 253px;
+  height: 360px;
+  background-color: rgb(var(--sf-color-surface));
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgb(var(--sf-color-line-color));
+  animation: slideUp 0.3s ease-out;
+  overflow: hidden;
+}
+
+.listbox-pane-popup .e-listbox-container {
+  border: none;
+}
+
+.listbox-pane-popup .e-filter-input {
+  border-bottom: 1px solid rgb(var(--sf-color-line-color));
+  margin: 12px;
+  margin-bottom: 0;
+}
+
+.listbox-pane-popup .e-filter-parent .e-filterinput {
+  background-color: rgb(var(--sf-color-background));
+  color: rgb(var(--sf-color-on-surface));
+}
+
+.listbox-pane-popup .e-list-item {
+  padding: 10px 16px;
+  border-bottom: 1px solid rgb(var(--sf-color-line-color));
+}
+
+.listbox-pane-popup .e-list-group-item {
+  padding: 8px 16px;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background-color: rgb(var(--sf-color-background));
+}
+
+.listbox-pane-popup .e-list-item-content {
+  color: rgb(var(--sf-color-on-surface));
+}
+
+.listbox-pane-popup .e-listbox-wrapper.e-filter-list:not(.e-listbox-container) .e-list-parent {
+  height: 310px !important;
+  scrollbar-width: thin;
+}
+
+/* Item with icon styling */
+.listbox-item-with-icon {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.listbox-item-with-icon.e-btn:hover {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.listbox-item-icon {
+  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(var(--sf-color-on-surface-variant));
+  opacity: 0.7;
+  transition: all 0.2s ease;
+}
+
+.listbox-item-label {
+  color: var(--jsonview-text-color);
+  font-size: 13px;
+}

package/styles/themes/options-editor.css

@@ -0,0 +1,63 @@
+/* Options Editor Styling */
+.options-editor {
+  padding:  0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.options-grid {
+  max-height: 300px;
+}
+
+.options-grid.table-col .e-content {
+  height: 260px !important;
+}
+
+.options-grid .e-rowcell {
+  padding: 12px;
+  font-size: 13px;
+}
+
+.options-editor .e-rowcell.e-templatecell {
+  box-shadow: unset !important;
+}
+
+.options-grid .e-rowcell select {
+  width: 100%;
+  padding: 6px 10px;
+  margin: 0 2px;
+  border: none ;
+  color: var(--color-sf-content-text-color);
+  background-color: var(--color-sf-content-bg-color);
+  border-radius: 3px;
+  font-size: 14px;
+  font-family: inherit;
+  transition: border-color 0.2s ease;
+}
+
+.options-grid .e-rowcell input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+  accent-color: var(--color-sf-primary);
+}
+
+.theme-material3 .options-grid .e-rowcell input[type="checkbox"] {
+  accent-color: rgb(var(--color-sf-primary));
+}
+
+.options-grid input[type=checkbox]:focus {
+    outline: 5px auto var(--color-sf-primary);
+    outline-offset: 3px;
+}
+
+.options-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.options-actions .e-primary {
+  padding: 8px 16px;
+  font-size: 13px;
+}