bpmn-js.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. .bjs-container {
  2. --bjs-font-family: Arial, sans-serif;
  3. --color-grey-225-10-15: hsl(225, 10%, 15%);
  4. --color-grey-225-10-35: hsl(225, 10%, 35%);
  5. --color-grey-225-10-55: hsl(225, 10%, 55%);
  6. --color-grey-225-10-75: hsl(225, 10%, 75%);
  7. --color-grey-225-10-80: hsl(225, 10%, 80%);
  8. --color-grey-225-10-85: hsl(225, 10%, 85%);
  9. --color-grey-225-10-90: hsl(225, 10%, 90%);
  10. --color-grey-225-10-95: hsl(225, 10%, 95%);
  11. --color-grey-225-10-97: hsl(225, 10%, 97%);
  12. --color-blue-205-100-45: hsl(205, 100%, 45%);
  13. --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
  14. --color-blue-205-100-50: hsl(205, 100%, 50%);
  15. --color-blue-205-100-95: hsl(205, 100%, 95%);
  16. --color-green-150-86-44: hsl(150, 86%, 44%);
  17. --color-red-360-100-40: hsl(360, 100%, 40%);
  18. --color-red-360-100-45: hsl(360, 100%, 45%);
  19. --color-red-360-100-92: hsl(360, 100%, 92%);
  20. --color-red-360-100-97: hsl(360, 100%, 97%);
  21. --color-white: hsl(0, 0%, 100%);
  22. --color-black: hsl(0, 0%, 0%);
  23. --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
  24. --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
  25. --breadcrumbs-font-family: var(--bjs-font-family);
  26. --breadcrumbs-item-color: var(--color-blue-205-100-50);
  27. --breadcrumbs-arrow-color: var(--color-black);
  28. --drilldown-fill-color: var(--color-white);
  29. --drilldown-background-color: var(--color-blue-205-100-50);
  30. }
  31. .bjs-breadcrumbs {
  32. position: absolute;
  33. display: none;
  34. flex-wrap: wrap;
  35. align-items: center;
  36. top: 30px;
  37. left: 30px;
  38. padding: 0px;
  39. margin: 0px;
  40. font-family: var(--breadcrumbs-font-family);
  41. font-size: 16px;
  42. line-height: normal;
  43. }
  44. .bjs-breadcrumbs-shown .bjs-breadcrumbs {
  45. display: flex;
  46. }
  47. .djs-palette-shown .bjs-breadcrumbs {
  48. left: 90px;
  49. }
  50. .djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs {
  51. left: 140px;
  52. }
  53. .bjs-breadcrumbs li {
  54. display: inline-flex;
  55. padding-bottom: 5px;
  56. }
  57. .bjs-breadcrumbs li a {
  58. cursor: pointer;
  59. color: var(--breadcrumbs-item-color);
  60. }
  61. .bjs-breadcrumbs li:last-of-type a {
  62. color: inherit;
  63. cursor: default;
  64. }
  65. .bjs-breadcrumbs li:not(:first-child)::before {
  66. content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>');
  67. padding: 0 8px;
  68. color: var(--breadcrumbs-arrow-color);
  69. height: 1em;
  70. }
  71. .bjs-breadcrumbs .bjs-crumb {
  72. display: inline-block;
  73. max-width: 200px;
  74. overflow: hidden;
  75. text-overflow: ellipsis;
  76. white-space: nowrap;
  77. }
  78. .bjs-drilldown {
  79. width: 20px;
  80. height: 20px;
  81. padding: 0px;
  82. margin-left: -20px;
  83. cursor: pointer;
  84. border: none;
  85. border-radius: 2px;
  86. outline: none;
  87. fill: var(--drilldown-fill-color);
  88. background-color: var(--drilldown-background-color);
  89. }
  90. .bjs-drilldown-empty {
  91. display: none;
  92. }
  93. .selected .bjs-drilldown-empty {
  94. display: inherit;
  95. }
  96. [data-popup="align-elements"] .djs-popup-results {
  97. display: flex;
  98. }
  99. [data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] {
  100. border-left: 1px solid var(--popup-border-color);
  101. }
  102. [data-popup="align-elements"] [data-group="align"] {
  103. display: grid;
  104. grid-template-columns: repeat(3, 1fr);
  105. }
  106. [data-popup="align-elements"] .djs-popup-body .entry {
  107. padding: 6px 8px;
  108. }
  109. [data-popup="align-elements"] .djs-popup-body .entry:not(:first-child) {
  110. margin-top: 0;
  111. }
  112. [data-popup="align-elements"] .djs-popup-entry-icon {
  113. display: block;
  114. margin: 0;
  115. height: 20px;
  116. width: 20px;
  117. }