@bpmn-io/form-js-editor 0.10.0 → 0.10.1

package/dist/assets/form-js-editor.css

@@ -1,287 +1,295 @@
-.fjs-editor-container {
-  --color-children-border: var(--color-grey-225-10-75);
-  --color-children-selected-border: var(--color-blue-205-100-50);
-  --color-children-selected-background: var(--color-blue-205-100-95);
-  --color-children-hover-border: var(--color-blue-205-100-50);
-  
-  --color-context-pad-item-background: var(--color-white);
-  --color-context-pad-item-fill: var(--color-grey-225-10-35);
-  --color-context-pad-item-hover-fill: var(--color-black);
-
-  --color-dragula-background: var(--color-blue-205-100-45);
-  --color-dragula-border: var(--color-blue-205-100-45);
-  --color-dragula-mirror-background: var(--color-white);
-  --color-dragula-mirror-border: var(--color-grey-225-10-80);
-}
-
-.fjs-palette-container {
-  --color-palette-container-background: var(--color-grey-225-10-97);
-  --color-palette-container-border: var(--color-grey-225-10-80);
-  --color-palette-header-color: var(--color-text);
-  --color-palette-header-background: var(--color-grey-225-10-95);
-  --color-palette-header-border: var(--color-grey-225-10-80);
-  --color-palette-field-border: var(--color-grey-225-10-80);
-  --color-palette-field-hover-background: var(--color-grey-225-10-95);
-}
-
-.fjs-properties-container {
-  --color-properties-container-background: var(--color-white);
-  --color-properties-container-border: var(--color-grey-225-10-80);
-  --properties-panel-width: 300px;
-}
-
-.fjs-editor-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-
-.fjs-editor-container .fjs-form-editor {
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-}
-
-.fjs-editor-container .fjs-form-container,
-.fjs-editor-container .fjs-editor-palette-container,
-.fjs-editor-container .fjs-editor-properties-container {
-  overflow-y: auto;
-  position: relative;
-}
-
-.fjs-editor-container .fjs-form-container,
-.fjs-editor-container .fjs-form {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.fjs-editor-container .fjs-form > .fjs-element {
-  flex-grow: 1;
-}
-
-.fjs-editor-container .fjs-children {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  min-width: 300px;
-  min-height: 100px;
-}
-
-.fjs-editor-container .fjs-children .fjs-children {
-  border: dashed 2px var(--color-children-border);
-  border-radius: 3px;
-}
-
-.fjs-editor-container .fjs-element {
-  display: flex;
-  flex-direction: column;
-  margin: 0 5px;
-}
-
-.fjs-editor-container .fjs-element + .fjs-element {
-  margin-top: 2px;
-}
-
-.fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
-  margin: 1px 16px;
-}
-
-.fjs-editor-container .fjs-form > .fjs-element {
-  margin: 0;
-  padding: 5px;
-}
-
-.fjs-editor-container .fjs-children > .fjs-element {
-  position: relative;
-  border: solid 2px transparent;
-}
-
-.fjs-editor-container .fjs-children > .fjs-element:hover,
-.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
-  border-radius: 3px;
-}
-
-.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
-  border-color: var(--color-children-selected-border);
-  background-color: var(--color-children-selected-background);
-}
-
-.fjs-editor-container .fjs-children > .fjs-element:hover {
-  border-color: var(--color-children-hover-border) !important;
-}
-
-.fjs-editor-container .fjs-input:disabled,
-.fjs-editor-container .fjs-textarea:disabled,
-.fjs-editor-container .fjs-taglist-input:disabled,
-.fjs-editor-container .fjs-select:disabled {
-  pointer-events: none;
-}
-
-/**
- * Context Pad
- */
-.fjs-editor-container .fjs-context-pad {
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
-}
-
-.fjs-editor-container .fjs-context-pad-item {
-  border: none;
-  border-radius: 3px;
-  background-color: var(--color-context-pad-item-background);
-  padding: 0;
-  width: 24px;
-  height: 24px;
-  fill: var(--color-context-pad-item-fill);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.fjs-editor-container .fjs-context-pad-item:hover {
-  fill: var(--color-context-pad-item-hover-fill);
-}
-
-/**
- * Palette
- */
-.fjs-editor-container .fjs-palette-container {
-  height: 100%;
-}
-
-.fjs-palette-container {
-  width: 200px;
-  background-color: var(--color-palette-container-background);
-  border-right: solid 1px var(--color-palette-container-border);
-  font-family: var(--font-family);
-}
-
-.fjs-editor-container .fjs-palette-container .fjs-palette {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.fjs-palette-container .fjs-palette-header {
-  font-size: 12px;
-  font-weight: bold;
-  color: var(--color-palette-header-color);
-  padding: 10px;
-  border-bottom: solid 1px var(--color-palette-header-border);
-  background-color: var(--color-palette-header-background);
-}
-
-.fjs-palette-container .fjs-palette-fields {
-  height: 100%;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-.fjs-palette-container .fjs-palette-field {
-  padding: 10px;
-  display: flex;
-  white-space: pre;
-  justify-content: flex-start;
-  align-items: center;
-  flex-direction: row;
-  border-bottom: solid 1px var(--color-palette-field-border);
-  font-size: 14px;
-  color: var(--color-text);
-}
-
-.fjs-palette-container .fjs-palette-field-icon {
-  margin-right: 10px;
-}
-
-.fjs-palette-container .fjs-palette-field:hover {
-  background-color: var(--color-palette-field-hover-background);
-  cursor: default;
-}
-
-/**
- * Properties Panel
- */
-.fjs-editor-container .fjs-properties-container {
-  height: 100%;
-}
-
-.fjs-properties-container {
-  background-color: var(--color-properties-container-background);
-  width: var(--properties-panel-width);
-  border-left: solid 1px var(--color-properties-container-border);
-  color: var(--color-text);
-}
-
-.fjs-properties-container .fjs-properties-panel {
-  height: 100%;
-}
-
-.fjs-properties-container .fjs-properties-panel * {
-  box-sizing: border-box;
-}
-
-.fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
-  transform: scale(1.3);
-}
-
-/**
- * Custom Dragula Styles
- */
-.gu-transit {
-  background: var(--color-dragula-background) !important;
-  border: solid 2px var(--color-dragula-border) !important;
-  border-radius: 3px !important;
-  filter: none !important;
-  height: 0 !important;
-  opacity: 1 !important;
-  padding: 0 !important;
-}
-
-.gu-transit * {
-  display: none !important;
-}
-
-.gu-mirror {
-  background-color: var(--color-dragula-mirror-background) !important;
-  border: solid 1px var(--color-dragula-mirror-border) !important;
-  border-radius: 3px !important;
-  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%) !important;
-  display: flex !important;
-  filter: none !important;
-  flex-direction: row !important;
-  justify-content: center !important;
-  align-items: center !important;
-  opacity: 0.5 !important;
-  padding: 0 !important;
-  pointer-events: none !important;
-  height: 54px !important;
-}
-
-/**
- * Compact editor overrides
- */
-
-.fjs-editor-compact .fjs-hide-compact {
-  display: none;
-}
-
-.fjs-editor-compact .fjs-palette-container {
-  width: auto;
-}
-
-.fjs-editor-compact .fjs-palette-field {
-  justify-content: center;
-  flex-direction: column;
-}
-
-.fjs-editor-compact .fjs-palette-field-icon {
-  margin: 0;
-}
-
-.fjs-editor-compact .fjs-palette-header {
-  text-align: center;
-}
+.fjs-editor-container {
+  --color-children-border: var(--color-grey-225-10-75);
+  --color-children-selected-border: var(--color-blue-205-100-50);
+  --color-children-selected-background: var(--color-blue-205-100-95);
+  --color-children-hover-border: var(--color-blue-205-100-50);
+  
+  --color-context-pad-item-background: var(--color-white);
+  --color-context-pad-item-fill: var(--color-grey-225-10-35);
+  --color-context-pad-item-hover-fill: var(--color-black);
+
+  --color-dragula-background: var(--color-blue-205-100-45);
+  --color-dragula-border: var(--color-blue-205-100-45);
+  --color-dragula-mirror-background: var(--color-white);
+  --color-dragula-mirror-border: var(--color-grey-225-10-80);
+}
+
+.fjs-palette-container {
+  --color-palette-container-background: var(--color-grey-225-10-97);
+  --color-palette-container-border: var(--color-grey-225-10-80);
+  --color-palette-header-color: var(--color-text);
+  --color-palette-header-background: var(--color-grey-225-10-95);
+  --color-palette-header-border: var(--color-grey-225-10-80);
+  --color-palette-field-border: var(--color-grey-225-10-80);
+  --color-palette-field-hover-background: var(--color-grey-225-10-95);
+}
+
+.fjs-properties-container {
+  --color-properties-container-background: var(--color-white);
+  --color-properties-container-border: var(--color-grey-225-10-80);
+  --properties-panel-width: 300px;
+}
+
+.fjs-editor-container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+}
+
+.fjs-editor-container .fjs-form-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+.fjs-editor-container .fjs-form-container,
+.fjs-editor-container .fjs-editor-palette-container,
+.fjs-editor-container .fjs-editor-properties-container {
+  overflow-y: auto;
+  position: relative;
+}
+
+.fjs-editor-container .fjs-form-container,
+.fjs-editor-container .fjs-form {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.fjs-editor-container .fjs-form > .fjs-element {
+  flex-grow: 1;
+}
+
+.fjs-editor-container .fjs-children {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-width: 300px;
+  min-height: 100px;
+}
+
+.fjs-editor-container .fjs-children .fjs-children {
+  border: dashed 2px var(--color-children-border);
+  border-radius: 3px;
+}
+
+.fjs-editor-container .fjs-element {
+  display: flex;
+  flex-direction: column;
+  margin: 0 5px;
+}
+
+.fjs-editor-container .fjs-element {
+  margin-top: 4px;
+}
+
+.fjs-editor-container .fjs-element:first-of-type {
+  margin-top: 8px;
+}
+
+.fjs-editor-container .fjs-form-field:not(.fjs-powered-by) {
+  margin: 1px 12px;
+}
+
+.fjs-editor-container .fjs-powered-by {
+  margin-top: 4px;
+}
+
+.fjs-editor-container .fjs-form > .fjs-element {
+  margin: 0;
+  padding: 5px;
+}
+
+.fjs-editor-container .fjs-children > .fjs-element {
+  position: relative;
+  border: solid 2px transparent;
+}
+
+.fjs-editor-container .fjs-children > .fjs-element:hover,
+.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
+  border-radius: 3px;
+}
+
+.fjs-editor-container .fjs-children > .fjs-element.fjs-editor-selected {
+  border-color: var(--color-children-selected-border);
+  background-color: var(--color-children-selected-background);
+}
+
+.fjs-editor-container .fjs-children > .fjs-element:hover {
+  border-color: var(--color-children-hover-border) !important;
+}
+
+.fjs-editor-container .fjs-input:disabled,
+.fjs-editor-container .fjs-textarea:disabled,
+.fjs-editor-container .fjs-taglist-input:disabled,
+.fjs-editor-container .fjs-select:disabled {
+  pointer-events: none;
+}
+
+/**
+ * Context Pad
+ */
+.fjs-editor-container .fjs-context-pad {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%);
+}
+
+.fjs-editor-container .fjs-context-pad-item {
+  border: none;
+  border-radius: 3px;
+  background-color: var(--color-context-pad-item-background);
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  fill: var(--color-context-pad-item-fill);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.fjs-editor-container .fjs-context-pad-item:hover {
+  fill: var(--color-context-pad-item-hover-fill);
+}
+
+/**
+ * Palette
+ */
+.fjs-editor-container .fjs-palette-container {
+  height: 100%;
+}
+
+.fjs-palette-container {
+  width: 200px;
+  background-color: var(--color-palette-container-background);
+  border-right: solid 1px var(--color-palette-container-border);
+  font-family: var(--font-family);
+}
+
+.fjs-editor-container .fjs-palette-container .fjs-palette {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.fjs-palette-container .fjs-palette-header {
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--color-palette-header-color);
+  padding: 10px;
+  border-bottom: solid 1px var(--color-palette-header-border);
+  background-color: var(--color-palette-header-background);
+}
+
+.fjs-palette-container .fjs-palette-fields {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.fjs-palette-container .fjs-palette-field {
+  padding: 10px;
+  display: flex;
+  white-space: pre;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  border-bottom: solid 1px var(--color-palette-field-border);
+  font-size: 14px;
+  color: var(--color-text);
+}
+
+.fjs-palette-container .fjs-palette-field-icon {
+  margin-right: 10px;
+}
+
+.fjs-palette-container .fjs-palette-field:hover {
+  background-color: var(--color-palette-field-hover-background);
+  cursor: default;
+}
+
+/**
+ * Properties Panel
+ */
+.fjs-editor-container .fjs-properties-container {
+  height: 100%;
+}
+
+.fjs-properties-container {
+  background-color: var(--color-properties-container-background);
+  width: var(--properties-panel-width);
+  border-left: solid 1px var(--color-properties-container-border);
+  color: var(--color-text);
+}
+
+.fjs-properties-container .fjs-properties-panel {
+  height: 100%;
+}
+
+.fjs-properties-container .fjs-properties-panel * {
+  box-sizing: border-box;
+}
+
+.fjs-properties-container .fjs-properties-panel .bio-properties-panel-header-icon svg {
+  transform: scale(1.3);
+}
+
+/**
+ * Custom Dragula Styles
+ */
+.gu-transit {
+  background: var(--color-dragula-background) !important;
+  border: solid 2px var(--color-dragula-border) !important;
+  border-radius: 3px !important;
+  filter: none !important;
+  height: 0 !important;
+  opacity: 1 !important;
+  padding: 0 !important;
+}
+
+.gu-transit * {
+  display: none !important;
+}
+
+.gu-mirror {
+  background-color: var(--color-dragula-mirror-background) !important;
+  border: solid 1px var(--color-dragula-mirror-border) !important;
+  border-radius: 3px !important;
+  box-shadow: 1px 1px 1px 1px rgb(0 0 0 / 10%) !important;
+  display: flex !important;
+  filter: none !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  opacity: 0.5 !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+  height: 54px !important;
+}
+
+/**
+ * Compact editor overrides
+ */
+
+.fjs-editor-compact .fjs-hide-compact {
+  display: none;
+}
+
+.fjs-editor-compact .fjs-palette-container {
+  width: auto;
+}
+
+.fjs-editor-compact .fjs-palette-field {
+  justify-content: center;
+  flex-direction: column;
+}
+
+.fjs-editor-compact .fjs-palette-field-icon {
+  margin: 0;
+}
+
+.fjs-editor-compact .fjs-palette-header {
+  text-align: center;
+}