bpmn-js-rails 0.1.0

data/app/assets/stylesheets/dmn-js/dmn-js-literal-expression.css

@@ -0,0 +1,165 @@
+.dmn-literal-expression-container {
+  --decision-properties-background-color: var(--color-white);
+  --decision-properties-border-color: var(--color-grey-225-10-15);
+  --decision-properties-color: var(--color-grey-225-10-15);
+  --literal-expression-color: var(--color-grey-225-10-15);
+  --literal-expression-properties-border-color: var(--color-grey-225-10-15);
+  --literal-expression-properties-color: var(--color-grey-225-10-15);
+  --powered-by-overlay-background-color: var(--color-black-opacity-20);
+  --powered-by-overlay-content-background-color: var(--color-white);
+  --powered-by-overlay-content-border-color: var(--color-grey-225-10-75);
+  --powered-by-overlay-content-color: var(--color-grey-225-10-15);
+  --textarea-border-color: var(--color-grey-225-10-15);
+  --textarea-color: var(--color-grey-225-10-15);
+  --view-drd-button-background-color: var(--color-white);
+  --view-drd-button-border-color: var(--color-grey-225-10-75);
+  --view-drd-button-color: var(--color-grey-225-10-15);
+  --view-drd-button-hover-background-color: var(--color-grey-225-10-97);
+  --literal-expression-font-family: 'Arial', sans-serif;
+  --literal-expression-font-family-monospace: monospace;
+
+  font-family: var(--literal-expression-font-family);
+  color: var(--literal-expression-color);
+  width: 100%;
+  height: 100%;
+}
+
+.dmn-literal-expression-container .viewer-container {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.dmn-literal-expression-container * {
+  box-sizing: border-box;
+}
+
+/* decision properties */
+.dmn-literal-expression-container .decision-properties {
+  border: 1px solid var(--decision-properties-border-color);
+  border-bottom: none;
+  padding: 10px;
+  padding-right: 75px;
+  color: var(--decision-properties-color);
+  background-color: var(--decision-properties-background-color);
+  position: relative;
+  min-width: 192px;
+}
+
+.dmn-literal-expression-container .decision-name {
+  margin: 0;
+  font-size: 21px;
+  font-weight: normal;
+  white-space: pre;
+}
+
+.dmn-literal-expression-container .decision-name:not(.editor) {
+  cursor: default;
+}
+
+.dmn-literal-expression-container .decision-name.editor {
+  cursor: text;
+}
+
+.dmn-literal-expression-container .decision-name div {
+  outline: none;
+}
+
+.dmn-literal-expression-container .decision-name:not(.editable),
+.dmn-literal-expression-container .decision-name [contenteditable="true"] {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.dmn-literal-expression-container .textarea .content-editable {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.dmn-literal-expression-container .decision-name.editor:not(.focussed):hover {
+  cursor: text;
+}
+
+.dmn-literal-expression-container .decision-name.focussed .content-editable {
+  text-overflow: unset;
+}
+
+/* textarea */
+.dmn-literal-expression-container .textarea {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px;
+  font-family: var(--literal-expression-font-family-monospace);
+  line-height: 1.4;
+  border: 1px solid var(--textarea-border-color);
+  border-bottom-width: 1px;
+  white-space: pre;
+  font-size: 14px;
+  color: var(--textarea-color);
+  min-height: 250px;
+  overflow: auto;
+}
+
+.dmn-literal-expression-container .textarea div:focus {
+  outline: none;
+}
+
+.dmn-literal-expression-container .textarea.editor {
+  cursor: text;
+}
+
+.dmn-literal-expression-container .textarea:not(.editor) {
+  cursor: default;
+}
+
+/* literal expression properties */
+.dmn-literal-expression-container .literal-expression-properties {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0;
+  border: 1px solid var(--literal-expression-properties-border-color);
+  border-top: none;
+  font-size: 14px;
+  color: var(--literal-expression-properties-color);
+}
+
+.dmn-literal-expression-container .literal-expression-properties .variables-table {
+  border-spacing: 8px;
+  border-collapse: separate;
+}
+
+.dmn-literal-expression-container .literal-expression-properties .variables-table tr td:first-child {
+  font-weight: bold;
+}
+
+.dmn-literal-expression-container .literal-expression-properties .variables-table tr td:last-child {
+  min-width: 100px;
+}
+
+.dmn-literal-expression-container .literal-expression-properties .variable-name-input {
+  width: 100%;
+}
+
+/* view drd */
+.dmn-literal-expression-container .view-drd {
+  margin-right: 10px;
+  padding-bottom: 10px;
+}
+
+.dmn-literal-expression-container .view-drd .view-drd-button {
+  background: var(--view-drd-button-background-color);
+  padding: 8px;
+  border: solid 1px var(--view-drd-button-border-color);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--view-drd-button-color);
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.dmn-literal-expression-container .view-drd .view-drd-button:hover {
+  background: var(--view-drd-button-hover-background-color);
+}

data/app/assets/stylesheets/dmn-js/dmn-js-shared.css

@@ -0,0 +1,221 @@
+/* Color definitions */
+.dmn-js-parent {
+  --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-95: hsl(225 10% 95%);
+  --color-grey-225-10-97: hsl(225 10% 97%);
+  --color-blue-205-100-35: hsl(205 100% 35%);
+  --color-blue-205-100-45: hsl(205 100% 45%);
+  --color-blue-205-100-45-opacity-30: hsl(205 100% 45% / 30%);
+  --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-35: hsl(360 100% 35%);
+  --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%);
+  --color-black-opacity-10: hsl(0 0% 0% / 10%);
+  --color-black-opacity-20: hsl(0 0% 0% / 20%);
+  --hint-button-color: var(--color-blue-205-100-35);
+  --hint-invalid-color: var(--color-red-360-100-35);
+  --separator-color: var(--color-grey-225-10-75);
+  --input-border-color: var(--color-grey-225-10-75);
+  --input-color: var(--color-grey-225-10-15);
+  --input-focus-border-color: var(--color-blue-205-100-50);
+  --input-focus-box-shadow-color: var(--color-blue-205-100-80);
+  --input-focus-box-shadow-inset-color: var(--color-grey-225-10-75);
+  --input-focus-invalid-border-color: var(--color-red-360-100-45);
+  --input-focus-invalid-box-shadow-color: var(--color-red-360-100-92);
+  --input-invalid-border-color: var(--color-red-360-100-45);
+  --input-invalid-color: var(--color-red-360-100-35);
+  --select-option-selected-color: var(--color-blue-205-100-35);
+  --select-option-hover-background-color: var(--color-black-opacity-10);
+  --select-options-background-color: var(--color-white);
+  --select-options-border-color: var(--color-grey-225-10-75);
+  --select-options-box-shadow-color: var(--color-black-opacity-10);
+  --select-options-color: var(--color-grey-225-10-15);
+}
+
+.dms-list-component .items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  line-height: 1.7em;
+}
+
+.dms-list-component .items .item .remove {
+  float: right;
+}
+
+.dms-fill-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.dms-fill-row > * {
+  flex: 0 0 auto;
+}
+
+.dms-fill-row > :last-child {
+  flex: 1 1 auto;
+}
+
+.dms-label {
+  font-weight: bold;
+  white-space: nowrap;
+  margin-right: 5px;
+}
+
+.dms-hrule {
+  border: 0;
+  border-top: dotted 1px var(--separator-color);
+  margin: 10px auto;
+}
+
+.dms-heading {
+  margin: 12px 0 8px;
+  font-weight: bold;
+}
+
+.dms-hint {
+  font-size: 12px;
+  margin-top: 5px;
+  color: var(--hint-color);
+}
+
+.dms-hint button {
+  color: var(--hint-button-color);
+  text-decoration: none;
+  display: inline;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  background: none;
+}
+
+.dms-validation-warning {
+  color: var(--hint-invalid-color);
+}
+
+h3.dms-heading {
+  font-size: 16px;
+}
+
+h4.dms-heading {
+  font-size: 14px;
+}
+
+.dms-input,
+.dms-select {
+  outline: none;
+  padding: 3px 6px;
+  border: 1px solid var(--input-border-color);
+  background: none;
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--input-color);
+  min-height: 26px;
+}
+
+.dms-input {
+  min-height: 26px;
+  white-space: pre-wrap;
+}
+
+.dms-select {
+  height: 26px;
+}
+
+.dms-input-select .dms-input {
+  padding-right: 24px;
+}
+
+.dms-input:focus,
+.dms-select:focus {
+  border: solid 1px var(--input-focus-border-color);
+  box-shadow: 0 0 0 2px var(--input-focus-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset;
+}
+
+.dms-input.invalid,
+.dms-select.invalid {
+  border-color: var(--input-invalid-border-color);
+  color: var(--input-invalid-color);
+}
+
+.dms-select.invalid:focus,
+.dms-input.invalid:focus {
+  border: solid 1px var(--input-focus-invalid-border-color);
+  box-shadow: 0 0 0 2px var(--input-focus-invalid-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset;
+}
+
+.dms-validated-input.dms-block .dms-input,
+.dms-block {
+  display: block;
+  width: 100%;
+}
+
+.dms-script-input {
+  height: 150px;
+  white-space: pre-wrap;
+  overflow: auto;
+}
+
+.dms-input-select {
+  display: inline-block;
+  position: relative;
+  min-width: 128px;
+}
+
+.dms-input-select .dms-input-select-icon {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.dms-input-select .options {
+  background: var(--select-options-background-color);
+}
+
+.dms-select-options {
+  position: absolute;
+  background-color: var(--select-options-background-color);
+  border: solid 1px var(--select-options-border-color);
+  border-radius: 2px;
+  font-size: 14px;
+  color: var(--select-options-color);
+  box-shadow: 1px 1px 1px 1px var(--select-options-box-shadow-color);
+  z-index: 20;
+  cursor: pointer;
+  overflow: auto;
+}
+
+.dms-select-options .option {
+  padding: 4px 9px;
+}
+
+.dms-select-options .option.active {
+  color: var(--select-option-selected-color);
+}
+
+.dms-select-options .option:focus,
+.dms-select-options .option:hover {
+  background-color: var(--select-option-hover-background-color);
+}
+
+.dmn-js-parent .content-editable.placeholder::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  opacity: 0.5;
+}