camunda-bpmn-js 3.12.0 → 3.13.0

package/dist/assets/properties-panel.css

@@ -1,7 +1,8 @@
 /**
  * Theming
  */
-.bio-properties-panel {
+ .bio-properties-panel,
+ .djs-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%);
@@ -26,11 +27,13 @@
   --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: white;
   --color-black: black;
   --color-transparent: transparent;
 
+}
+
+.bio-properties-panel {
   --text-base-color: var(--color-grey-225-10-15);
   --text-error-color: var(--color-red-360-100-45);
   --link-color: var(--color-blue-205-100-50);
@@ -118,12 +121,6 @@
 
   --feelers-select-color:  var(--color-blue-205-100-85);
 
-  --tooltip-underline-color: var(--color-blue-219-99-53);
-  --tooltip-background-color: var(--color-grey-0-0-22);
-  --tooltip-link: var(--color-blue-218-100-74);
-  --tooltip-code-background-color: var(--color-grey-225-10-97);
-  --tooltip-code-border-color: var(--color-grey-225-10-85);
-  
   --text-size-base: 14px;
   --text-size-small: 13px;
   --text-size-smallest: 12px;
@@ -1116,7 +1113,7 @@ textarea.bio-properties-panel-input {
 }
 
 .bio-properties-panel-feel-editor-container .bio-properties-panel-input {
-  resize: vertical;
+  resize: none;
   overflow: hidden;
   overflow-y: auto;
 }
@@ -1149,19 +1146,35 @@ textarea.bio-properties-panel-input {
   text-decoration-style: dotted;
   text-underline-offset: 2px;
   font: inherit;
+  display: flex;
+  justify-content: center;
+  width: fit-content;
 }
 
 .bio-properties-panel-tooltip {
+  --tooltip-underline-color: var(--color-blue-219-99-53);
+  --tooltip-background-color: var(--color-grey-0-0-22);
+  --tooltip-link: var(--color-blue-218-100-74);
+  --tooltip-code-background-color: var(--color-grey-225-10-97);
+  --tooltip-code-border-color: var(--color-grey-225-10-85);
+
   display: flex;
   color: var(--color-white, white);
   position: fixed;
   z-index: 1000;
-  padding-right: 6px;
   max-width: 300px;
   font-size: var(--text-size-small);
   font-family: var(--font-family);
 }
 
+.bio-properties-panel-tooltip.right {
+  padding-right: 6px;
+}
+
+.bio-properties-panel-tooltip.top {
+  flex-direction: column;
+}
+
 .bio-properties-panel-tooltip-content {
   background-color: var(--tooltip-background-color);
   padding: 16px;
@@ -1207,6 +1220,12 @@ textarea.bio-properties-panel-input {
   margin-top: 16px;
 }
 
+.bio-properties-panel-tooltip.top .bio-properties-panel-tooltip-arrow {
+  margin-top: -3px;
+  margin-left: calc(50% - 2.5px);
+  transform: rotate(90deg);
+}
+
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-feelers-editor__open-popup-placeholder,
 .bio-properties-panel-feel-editor-container .bio-properties-panel-feel-editor__open-popup-placeholder {
   display: none;
@@ -1277,6 +1296,8 @@ textarea.bio-properties-panel-input {
 
 .bio-properties-panel-popup .bio-properties-panel-popup__body:not(:first-child) {
   padding-top: 0;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 .bio-properties-panel-popup .bio-properties-panel-popup__header {
@@ -1361,6 +1382,10 @@ textarea.bio-properties-panel-input {
   min-width: 100%;
 }
 
+.bio-properties-panel-feel-popup .bio-properties-panel-feel-editor-container .cm-scroller {
+  overflow: auto !important;
+}
+
 .bio-properties-panel-feel-popup .bio-properties-panel-feelers-editor-container {
   width: 100%;
   display: flex;
@@ -1378,7 +1403,6 @@ textarea.bio-properties-panel-input {
   width: 100%;
   resize: none;
   padding: 0;
-  margin-left: -12px;
   overflow: hidden;
   overflow-y: auto
 }
@@ -1390,9 +1414,12 @@ textarea.bio-properties-panel-input {
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup {
   position: absolute;
-  display: none;
+  top: 0;
   right: 0;
-  bottom: -1px;
+  line-height: 1;
+  padding: 2px 4px;
+  margin: 3px;
+  display: none;
   background: none;
   border: none;
   color: var(--feel-open-popup-color);
@@ -1406,10 +1433,6 @@ textarea.bio-properties-panel-input {
   display: block;
 }
 
-.bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup {
-  bottom: 0;
-}
-
 .bio-properties-panel-feelers-editor-container .bio-properties-panel-open-feel-popup:hover,
 .bio-properties-panel-feel-container .bio-properties-panel-open-feel-popup:hover {
   color: var(--feel-open-popup-hover-color);