camunda-bpmn-js 2.5.0 → 2.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -99,8 +99,11 @@
99
99
  --dropdown-item-hover-background-color: var(--color-grey-225-10-95);
100
100
  --dropdown-separator-background-color: var(--color-grey-225-10-75);
101
101
 
102
- --feel-active-color: var(--color-blue-205-100-35);
102
+ --feel-background-color: var(--color-grey-225-10-95);
103
+ --feel-active-color: var(--color-blue-205-100-45);
103
104
  --feel-inactive-color: var(--color-grey-225-10-35);
105
+ --feel-hover-background-color: var(--color-grey-225-10-90);
106
+ --feel-active-background-color: var(--color-grey-225-10-95);
104
107
 
105
108
  --feel-indicator-background-color: var(--color-grey-225-10-90);
106
109
 
@@ -512,7 +515,7 @@ select.bio-properties-panel-input {
512
515
  }
513
516
 
514
517
  .bio-properties-panel-input[type="checkbox"]:focus {
515
- outline: 1px solid var(--input-focus-border-color);
518
+ outline: 2px solid var(--input-focus-border-color);
516
519
  outline-offset: 0;
517
520
  }
518
521
 
@@ -582,10 +585,23 @@ textarea.bio-properties-panel-input {
582
585
  align-items: center;
583
586
  }
584
587
 
588
+ .bio-properties-panel-toggle-switch.inline {
589
+ display: flex;
590
+ flex-direction: row;
591
+ }
592
+
593
+ .bio-properties-panel-toggle-switch.inline .bio-properties-panel-field-wrapper {
594
+ margin-left: auto;
595
+ }
596
+
585
597
  .bio-properties-panel-toggle-switch > .bio-properties-panel-label {
586
598
  font-size: var(--text-size-base);
587
599
  }
588
600
 
601
+ .bio-properties-panel-toggle-switch.inline > .bio-properties-panel-label {
602
+ font-size: var(--text-size-small);
603
+ }
604
+
589
605
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__label {
590
606
  margin: 0;
591
607
  margin-left: 6px;
@@ -598,6 +614,11 @@ textarea.bio-properties-panel-input {
598
614
  height: 16px;
599
615
  }
600
616
 
617
+ .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher:focus-within {
618
+ outline: 2px solid var(--input-focus-border-color);
619
+ outline-offset: 1px;
620
+ }
621
+
601
622
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher input[type='checkbox'] {
602
623
  opacity: 0;
603
624
  width: 0;
@@ -606,6 +627,7 @@ textarea.bio-properties-panel-input {
606
627
 
607
628
  .bio-properties-panel-toggle-switch .bio-properties-panel-toggle-switch__switcher .bio-properties-panel-toggle-switch__slider {
608
629
  position: absolute;
630
+ cursor: pointer;
609
631
  top: 0;
610
632
  left: 0;
611
633
  right: 0;
@@ -962,34 +984,57 @@ textarea.bio-properties-panel-input {
962
984
  padding-right: 2em
963
985
  }
964
986
 
987
+ .bio-properties-panel-feel-entry .bio-properties-panel-label {
988
+ display: flex;
989
+ }
990
+
965
991
  .bio-properties-panel-feel-icon {
966
- display: inline-block;
967
- height: 16px;
968
- border-radius: 8px;
992
+ display: inline-flex;
993
+ height: 22px;
994
+ width: 22px;
969
995
  vertical-align: text-bottom;
970
996
  padding: 0;
971
997
  margin: 0 3px;
972
998
  align-items: center;
973
999
  align-self: center;
1000
+ justify-content: center;
974
1001
  border: none;
975
1002
  background: none;
1003
+ border-radius: 3px;
976
1004
  }
977
1005
 
978
1006
  .bio-properties-panel-feel-icon.optional {
979
1007
  cursor: pointer;
1008
+
1009
+ background: var(--feel-background-color);
980
1010
  }
981
1011
 
982
1012
  .bio-properties-panel-feel-icon svg * {
983
- color: var(--feel-inactive-color);
1013
+ fill: var(--feel-inactive-color);
1014
+ }
1015
+
1016
+ .bio-properties-panel-feel-icon:hover {
1017
+ background: var(--feel-hover-background-color);
1018
+ }
1019
+
1020
+ .bio-properties-panel-feel-icon.active {
1021
+ background: var(--feel-active-background-color);
1022
+ }
1023
+
1024
+ .bio-properties-panel-feel-icon.active:hover {
1025
+ background: var(--feel-hover-background-color);
1026
+ }
1027
+
1028
+ .bio-properties-panel-feel-icon.required.active {
1029
+ background: none;
984
1030
  }
985
1031
 
986
1032
  .bio-properties-panel-feel-icon.active svg * {
987
- color: var(--feel-active-color);
1033
+ fill: var(--feel-active-color);
988
1034
  }
989
1035
 
990
- .bio-properties-panel-feel-icon svg {
991
- width: 16px;
992
- height: 16px;
1036
+ .bio-properties-panel-feel-icon.required.active svg * {
1037
+ fill: var(--feel-inactive-color);
993
1038
  }
994
1039
 
995
1040
  .bio-properties-panel-feel-editor-container {
@@ -1046,3 +1091,20 @@ textarea.bio-properties-panel-input {
1046
1091
  .bio-properties-panel-feel-container .cm-editor {
1047
1092
  min-height: 100%;
1048
1093
  }
1094
+
1095
+ .bio-properties-panel-feel-checkbox,
1096
+ .bio-properties-panel-feel-toggle-switch {
1097
+ padding-top: 1px;
1098
+ }
1099
+
1100
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active),
1101
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) {
1102
+ display: flex;
1103
+ flex-direction: row;
1104
+ align-items: center;
1105
+ }
1106
+
1107
+ .bio-properties-panel-feel-checkbox .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container,
1108
+ .bio-properties-panel-feel-toggle-switch .bio-properties-panel-feel-entry:not(.feel-active) .bio-properties-panel-feel-container {
1109
+ margin-left: auto;
1110
+ }