@camunda/form-playground/dist/assets/camunda-form-playground.css

Camunda Form Playground.

.cfp-root {
  --collapsible-border-color: var(--color-grey-225-10-85);
  --collapsible-title-background-color: var(--color-grey-225-10-95);
  --collapsible-action-fill-color: var(--color-grey-225-10-35);
  --collapsible-title-hover-action-background-color: var(--color-grey-225-10-85);
  --collapsible-action-hover-background-color: var(--color-grey-225-10-80);
}

.cfp-collapsible-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-top: solid 1px var(--collapsible-border-color);
}

.cfp-collapsible-panel .cfp-collapsible-panel-title {
  cursor: var(--collapsible-cursor);
  background: var(--collapsible-title-background-color);
  border-bottom: solid 1px var(--collapsible-border-color);
  display: flex;
  position: relative;
  user-select: none;
}

.cfp-collapsible-panel .cfp-collapsible-panel-title h1 {
  font-size: 14px;
  margin: 0;
  padding: 10px;
}

.cfp-collapsible-panel .cfp-collapsible-panel-content {
  overflow: auto;
  height: 100%;
}

.cfp-collapsible-panel .cfp-collapsible-panel-content > div {
  height: 100%;
}

.cfp-collapsible-panel:not(.open) {
  flex: none !important;
}

.cfp-collapsible-panel:not(.open) .cfp-collapsible-panel-content {
  display: none;
}

.cfp-collapsible-panel:not(.open) .cfp-collapsible-panel-title {
  border: none;
}

.cfp-collapsible-panel .cfp-collapsible-panel-actions {
  padding-left: 2px;
  position: absolute;
  right: 4px;
  top: 3px;
}

.cfp-collapsible-panel button.cfp-collapsible-panel-action {
  cursor: var(--collapsible-cursor);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  height: 22px;
  line-height: 22px;
  min-width: 22px;
  margin: 5px;
  padding: 0 3px;
  border: none;
  background: none;
  text-align: center;
  fill: var(--collapsible-action-fill-color);
  min-width: 22px;
  border-radius: 11px;
}

.cfp-collapsible-panel .cfp-collapsible-panel-title:hover button.cfp-collapsible-panel-action {
  background-color: var(--collapsible-title-hover-action-background-color);
}

.cfp-collapsible-panel button.cfp-collapsible-panel-action:hover {
  background-color: var(--collapsible-action-hover-background-color) !important;
}

.cfp-root {
  --collapsed-preview-background-color: var(--color-grey-225-10-95);
  --collapsed-preview-action-fill-color: var(--color-grey-225-10-35);
  --collapsed-preview-hover-action-background-color: var(--color-grey-225-10-85);
  --collapsed-preview-action-hover-background-color: var(--color-grey-225-10-80);
  --collapsed-preview-cursor: var(--collapsible-cursor);
}

.cfp-collapsed-preview {
  cursor: var(--collapsed-preview-cursor);
  height: 100%;
  flex: none;
  display: none;
  flex-direction: column;
  background: var(--collapsed-preview-background-color);
  position: relative;
}

.cfp-collapsed-preview.visible {
  display: flex;
}

.cfp-collapsed-preview .cfp-collapsed-preview-title {
  height: 100%;
  user-select: none;
}

.cfp-collapsed-preview-title h1 {
  font-size: 14px;
  margin: 0;
  margin-right: 2px;
  padding: 10px;
  white-space: nowrap;
  transform: rotate(-90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}

.cfp-collapsed-preview .cfp-collapsed-preview-actions {
  padding-left: 2px;
  position: absolute;
  right: 1px;
  bottom: 2px;
}

.cfp-collapsed-preview button.cfp-collapsed-preview-action {
  cursor: var(--collapsed-preview-cursor);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  height: 22px;
  line-height: 22px;
  min-width: 22px;
  margin: 5px;
  padding: 0 3px;
  border: none;
  background: none;
  text-align: center;
  fill: var(--collapsed-preview-action-fill-color);
  min-width: 22px;
  border-radius: 11px;
}

.cfp-collapsed-preview:hover button.cfp-collapsed-preview-action {
  background-color: var(--collapsed-preview-hover-action-background-color);
}

.cfp-collapsed-preview button.cfp-collapsed-preview-action:hover {
  background-color: var(--collapsed-preview-action-hover-background-color) !important;
}
.cfp-root {
  --color-grey-225-10-15: hsl(225, 10%, 15%);
  --color-grey-225-10-35: hsl(225, 10%, 35%);
  --color-grey-225-10-55: hsl(225, 10%, 55%);
  --color-grey-225-10-75: hsl(225, 10%, 75%);
  --color-grey-225-10-80: hsl(225, 10%, 80%);
  --color-grey-225-10-85: hsl(225, 10%, 85%);
  --color-grey-225-10-90: hsl(225, 10%, 90%);
  --color-grey-225-10-93: hsl(225, 10%, 93%);
  --color-grey-225-10-95: hsl(225, 10%, 95%);
  --color-grey-225-10-97: hsl(225, 10%, 97%);

  --color-blue-205-100-45: hsl(205, 100%, 45%);
  --color-blue-205-100-50: hsl(205, 100%, 50%);
  --color-blue-205-100-80: hsl(205, 100%, 80%);
  --color-blue-205-100-95: hsl(205, 100%, 95%);

  --color-green-150-86-44: hsl(150, 86%, 44%);

  --color-red-360-100-40: hsl(360, 100%, 40%);
  --color-red-360-100-45: hsl(360, 100%, 45%);
  --color-red-360-100-92: hsl(360, 100%, 92%);
  --color-red-360-100-97: hsl(360, 100%, 97%);

  --color-white: hsl(0, 0%, 100%);
  --color-black: hsl(0, 0%, 0%);

  --border-color: var(--color-grey-225-10-85);
  --background-color: var(--color-grey-225-10-95);
  --palette-background-color: var(--color-grey-225-10-95);
  --properties-background-color: var(--color-grey-225-10-97);
  --properties-group-background-color: var(--color-grey-225-10-97);
  --properties-input-background-color: var(--color-white);
  --properties-arrow-hover-background-color: var(--color-grey-225-10-90);
  --container-background-color: var(--color-white);
  --cm-background-color: var(--color-white);
  --drag-container-border-color: var(--color-grey-225-10-80);

  --form-container-max-width: 1200px;
  --collapsible-cursor: default;
  --drag-cursor: default;

  --font-family: 'IBM Plex Sans', system-ui, Arial, sans-serif;
  --font-family-monospace: 'IBM Plex Mono', monospace;
}

.cfp-container {
  display: flex;
  flex: 1;
  position: relative;
  height: 100%;
}

.cfp-root {
  display: flex;
  overflow: hidden;
  flex-direction: row;
  flex: 1;
  background-color: var(--background-color);
}

.cfp-root .cfp-left,
.cfp-root .cfp-right {
  position: relative;
  overflow: hidden;
  display: flex;
  flex: 1;
  width: 0;
  flex-direction: column;
  border-right: solid 1px var(--border-color);
  border-left: solid 1px var(--border-color);
}

.cfp-root.cfp-open-preview .cfp-left {
  margin-right: 6px;
}

.cfp-root:not(.cfp-open-preview) .cfp-right {
  flex: none;
  width: 35px;
  border-left: none;
}

.cfp-root .cfp-editor-container,
.cfp-root .cfp-data-container,
.cfp-root .cfp-preview-container,
.cfp-root .cfp-result-container {
  overflow: auto;
  background-color: var(--container-background-color);
}

.cfp-root .cfp-data-container,
.cfp-root .cfp-result-container {
  position: relative;
}

.cfp-root [data-idx="form-definition"] {
  border-top: none;
  flex: 2;
}

.cfp-root [data-idx="form-definition"] .cfp-collapsible-panel-title {
  cursor: default;
}

.cfp-root [data-idx="form-input"] {
  flex: 1;
}

.cfp-root [data-idx="form-preview"] {
  border-top: none;
  flex: 2;
}

.cfp-root [data-idx="form-output"] {
  flex: 1;
}

.cfp-root:not(.cfp-open-preview) [data-idx="form-input"],
.cfp-root:not(.cfp-open-preview) [data-idx="form-output"],
.cfp-root:not(.cfp-open-preview) [data-idx="form-preview"] {
  display: none;
}

.cfp-root .fjs-container {
  max-width: var(--form-container-max-width);
  margin: auto;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.cfp-root .fjs-container .cds--grid .cds--row {
  margin-left: -1rem;
  margin-right: -1rem;
}

.cfp-root .fjs-editor-container {
  display: inherit;
}

.cfp-root .fjs-editor-container .fjs-children {
  min-width: unset;
}

.cfp-root .cfp-collapsible-panel .cm-editor {
  background-color: var(--cm-background-color);
  height: 100%;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.cfp-root .cfp-collapsible-panel .cm-editor .cm-scroller {
  overflow: auto !important;
  font-family: var(--font-family-monospace);
}

.cfp-root .cfp-palette {
  background-color: var(--palette-background-color);
  overflow: auto;
  flex: 2;
  min-width: min-content;
  max-width: max-content;
}

.cfp-root .cfp-palette .fjs-palette-container {
  border-right: none;
  height: 100%;
}

.cfp-root .cfp-palette .fjs-hide-compact {
  display: none;
}

.cfp-root .cfp-properties {
  position: relative;
  display: flex;
  height: 100%;
  overflow-y: auto;
  flex: 2;
  min-width: min-content;
  max-width: max-content;
}

.cfp-root .cfp-properties .fjs-properties-container {
  --properties-panel-width: 300px;
  --color-properties-container-background: var(--properties-background-color);
  border-left: none !important;
}

.cfp-root .cfp-properties .bio-properties-panel {
  --input-background-color: var(--properties-input-background-color);
  --group-background-color: var(--properties-group-background-color);
  --arrow-hover-background-color: var(--properties-arrow-hover-background-color);
}

/* mitigate low contrast: https://github.com/bpmn-io/cm-theme/issues/4 */
.cfp-root .cfp-properties .bio-properties-panel-feelers-editor .cm-content ::selection {
  background: #a4d3fc !important;
}

/**
 * Custom Dragula Styles
 *
 * @pinussilvestrus: remove me once this is fixed: https://github.com/bpmn-io/form-js/issues/462
 */
.cfp-root .fjs-children.fjs-drag-container {
  border: 2px dashed transparent;
}

.gu-unselectable .cfp-root .fjs-children.fjs-drag-container {
  cursor: var(--drag-cursor);
}

.cfp-root:not(.cfp-open-preview) .fjs-children.fjs-drop-container-vertical  {
  border: 2px dashed transparent;
}

@media only screen and (min-width: 1650px) {
  .cfp-root:not(.cfp-open-preview).cfp-dragging .fjs-children.fjs-drop-container-vertical  {
    border-color: var(--drag-container-border-color);
  }
}