1.dmn-boxed-expression-container {
2  --context-menu-background-color: var(--color-white);
3  --context-menu-border-color: var(--color-grey-225-10-75);
4  --context-menu-color: var(--color-grey-225-10-15);
5  --context-menu-box-shadow-color: var(--color-black-opacity-10);
6  --context-menu-group-entry-border-color: var(--color-grey-225-10-75);
7  --context-menu-group-entry-disabled-color: var(--color-grey-225-10-75);
8  --context-menu-group-entry-hover-background-color: var(--color-grey-225-10-95);
9  --edit-button-color: var(--color-grey-225-10-15);
10  --edit-button-background-color: var(--color-grey-225-10-97);
11  --edit-button-border-color: var(--color-grey-225-10-75);
12  --edit-button-box-shadow-color: var(--color-black-opacity-10);
13  --edit-button-disabled-color: var(--color-grey-225-10-75);
14}
15
16/* common */
17.dmn-boxed-expression-container button {
18  background: var(--color-white);
19  border: solid 1px var(--color-grey-225-10-75);
20  color: var(--color-grey-225-10-15);
21  font-size: var(--font-size);
22}
23
24.dmn-boxed-expression-container button:hover {
25  background-color: var(--color-grey-225-10-97);
26}
27
28.dmn-boxed-expression-container .dms-input {
29  width: 160px;
30}
31
32/* element-name */
33.dmn-boxed-expression-container .element-name {
34  /* TODO(@barmac): rework focus indicators to use outline instead of border */
35  border: solid 1px transparent;
36  width: 24em;
37  max-width: 100%;
38}
39
40/* context-menu */
41
42.dmn-boxed-expression-container .context-menu {
43  position: absolute;
44  background: var(--context-menu-background-color);
45  border: solid 1px var(--context-menu-border-color);
46  border-radius: 2px;
47  font-size: 14px;
48  color: var(--context-menu-color);
49  box-shadow: 1px 1px 1px 1px var(--context-menu-box-shadow-color);
50}
51
52.dmn-boxed-expression-container .context-menu .context-menu-container {
53  margin: 8px;
54}
55
56.dmn-boxed-expression-container .context-menu .context-menu-flex {
57  display: flex;
58  flex-direction: column;
59}
60
61.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry {
62  display: flex;
63  flex-direction: row;
64  align-items: stretch;
65  width: 100%;
66  padding: 8px 16px;
67  cursor: default;
68  white-space: nowrap;
69}
70
71.dmn-boxed-expression-container .context-menu-group .context-menu-group-entry:hover {
72  background-color: var(--context-menu-group-entry-hover-background-color);
73}
74
75.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry.disabled {
76  pointer-events: none;
77  color: var(--context-menu-group-entry-disabled-color);
78}
79
80.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon {
81  display: inline-block;
82  text-align: center;
83  width: 14px;
84  margin-right: 6px;
85}
86
87.dmn-boxed-expression-container .context-menu .context-menu-group .context-menu-group-entry .context-menu-group-entry-icon::before {
88  margin: 0;
89}
90
91.dmn-boxed-expression-container .context-menu-group:not(:last-child)::after {
92  content: '';
93  display: block;
94  margin: 0 8px;
95  border-bottom: 1px solid var(--context-menu-group-entry-border-color);
96  height: 1px;
97}
98
99/* edit-button */
100
101.dmn-boxed-expression-container .edit-button {
102  color: var(--edit-button-color);
103  background-color: var(--edit-button-background-color);
104  position: absolute;
105  top: 2px;
106  left: 2px;
107  padding: 4px;
108  border-radius: 2px;
109  border: solid 1px var(--edit-button-border-color);
110  font-size: var(--font-size);
111  box-shadow: 1px 1px 1px 1px var(--edit-button-box-shadow-color);
112}
113
114.dmn-boxed-expression-container :not(:hover, :focus-within) .edit-button {
115  clip-path: inset(50%);
116  height: 1px;
117  overflow: hidden;
118  position: absolute;
119  white-space: nowrap;
120  width: 1px;
121}
122
123/* function-definition */
124.dmn-boxed-expression-container .context-menu .function-definition-parameter button {
125  border: none;
126}
127
128.dmn-boxed-expression-container .context-menu .formal-parameters .add-parameter {
129  margin-left: 3px;
130}
131