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

package/styles/themes/left-pane.css

@@ -1,253 +0,0 @@
-.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

@@ -1,63 +0,0 @@
-/* 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;
-}