@openmrs/esm-form-builder-app 3.5.2-pre.3750 → 3.5.2-pre.3753

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.
@@ -1,372 +1,375 @@
1
- // These styles are copied from 'node_modules/react-mde/lib/styles/scss/react-mde-all.scss'
2
- $mde-border-radius: 2px !default;
3
- $mde-white-color: white !default;
4
- $mde-border-color: #c8ccd0 !default;
5
- $mde-button-color: #242729 !default;
6
- $mde-toolbar-color: #f9f9f9 !default;
7
- $mde-selected-color: #0366d6 !default;
8
- $mde-toolbar-padding: 10px !default;
9
- $mde-editor-default-min-height: 200px !default;
10
- $mde-editor-padding: 10px !default;
11
- $mde-preview-horizontal-padding: 10px !default;
12
- $mde-preview-padding: 10px !default;
13
- $mde-preview-default-min-height: $mde-editor-default-min-height !default;
14
- $mde-preview-default-height: auto !default;
15
-
16
- .container {
17
- position: relative;
1
+ // These styles are copied from 'node_modules/react-mde/lib/styles/scss/react-mde-all.scss'
2
+ $mde-border-radius: 2px !default;
3
+ $mde-white-color: white !default;
4
+ $mde-border-color: #c8ccd0 !default;
5
+ $mde-button-color: #242729 !default;
6
+ $mde-toolbar-color: #f9f9f9 !default;
7
+ $mde-selected-color: #0366d6 !default;
8
+ $mde-toolbar-padding: 10px !default;
9
+ $mde-editor-padding: 10px !default;
10
+ $mde-preview-padding: 10px !default;
11
+
12
+ @keyframes tooltip-appear {
13
+ from {
14
+ opacity: 0;
15
+ }
16
+ to {
17
+ opacity: 1;
18
+ }
18
19
  }
19
20
 
20
- .markdownPlaceholder {
21
- position: absolute;
22
- top: 12px;
23
- left: 12px;
24
- color: #888;
25
- pointer-events: none; /* Allows click-through to editor */
26
- font-size: 14px;
21
+ @mixin tooltip-animation {
22
+ animation-name: tooltip-appear;
23
+ animation-duration: 0.2s;
24
+ animation-delay: 0.5s;
25
+ animation-fill-mode: forwards;
27
26
  }
28
27
 
29
- :global(.mde-header) {
30
- flex-shrink: 0;
31
- display: flex;
32
- flex-direction: row;
33
- flex-wrap: wrap;
34
- align-items: stretch;
35
- border-bottom: 1px solid $mde-border-color;
36
- border-radius: $mde-border-radius $mde-border-radius 0 0;
37
- background: $mde-toolbar-color;
38
-
39
- :global(.mde-tabs) {
40
- display: flex;
41
- flex-direction: row;
42
-
43
- button {
44
- border-radius: $mde-border-radius;
45
- margin: 6px 3px;
46
- background-color: transparent;
47
- border: 1px solid transparent;
48
- cursor: pointer;
49
- &:first-child {
50
- margin-left: 6px;
51
- }
52
- &:global(.selected) {
53
- border: 1px solid $mde-border-color
54
- }
55
- }
56
- }
57
-
58
- :global(.svg-icon) {
59
- width: 1em;
60
- height: 1em;
61
- display: inline-block;
62
- font-size: inherit;
63
- overflow: visible;
64
- vertical-align: -.125em;
65
- }
28
+ .container {
29
+ position: relative;
66
30
 
67
- ul:global(.mde-header-group) {
68
- display: flex !important;
69
- flex-direction: row;
70
- margin: 0;
71
- padding: $mde-toolbar-padding;
72
- list-style: none;
31
+ :global(.mde-header) {
32
+ flex-shrink: 0;
73
33
  display: flex;
74
- flex-wrap: nowrap;
34
+ flex-direction: row;
35
+ flex-wrap: wrap;
36
+ align-items: stretch;
37
+ border-bottom: 1px solid $mde-border-color;
38
+ border-radius: $mde-border-radius $mde-border-radius 0 0;
39
+ background: $mde-toolbar-color;
75
40
 
76
- &:global(.hidden) {
77
- visibility: hidden;
78
- }
41
+ :global(.mde-tabs) {
42
+ display: flex;
43
+ flex-direction: row;
79
44
 
80
- li:global(.mde-header-item) {
81
- display: inline-block;
82
- position: relative;
83
- margin: 0 4px;
84
45
  button {
85
- text-align: left;
46
+ border-radius: $mde-border-radius;
47
+ margin: 6px 3px;
48
+ background-color: transparent;
49
+ border: 1px solid transparent;
86
50
  cursor: pointer;
87
- height: 22px;
88
- padding: 4px;
89
- margin: 0;
90
- border: none;
91
- background: none;
92
- color: $mde-button-color;
93
- @keyframes tooltip-appear {
94
- from {
95
- opacity: 0;
96
- }
97
- to {
98
- opacity: 1;
99
- }
51
+ &:first-child {
52
+ margin-left: 6px;
100
53
  }
101
- @mixin tooltip-animation {
102
- animation-name: tooltip-appear;
103
- animation-duration: 0.2s;
104
- animation-delay: 0.5s;
105
- animation-fill-mode: forwards;
54
+ &:global(.selected) {
55
+ border: 1px solid $mde-border-color;
106
56
  }
57
+ }
58
+ }
107
59
 
108
- &:global(.tooltipped) {
109
- &:hover::before {
110
- @include tooltip-animation();
111
- opacity: 0;
112
- position: absolute;
113
- z-index: 1000001;
114
- width: 0;
115
- height: 0;
116
- color: rgba(0, 0, 0, 0.8);
117
- pointer-events: none;
118
- content: "";
119
- border: 5px solid transparent;
120
- top: -5px;
121
- right: 50%;
122
- bottom: auto;
123
- margin-right: -5px;
124
- border-top-color: rgba(0, 0, 0, 0.8);
125
- }
126
- &:hover::after {
127
- @include tooltip-animation();
128
- font-size: 11px;
129
- opacity: 0;
130
- position: absolute;
131
- z-index: 1000000;
132
- padding: 5px 8px;
133
- color: #fff;
134
- pointer-events: none;
135
- content: attr(aria-label);
136
- background: rgba(0, 0, 0, 0.8);
137
- border-radius: 3px;
138
- right: 50%;
139
- bottom: 100%;
140
- transform: translateX(50%);
141
- margin-bottom: 5px;
142
- white-space: nowrap;
60
+ :global(.svg-icon) {
61
+ width: 1em;
62
+ height: 1em;
63
+ display: inline-block;
64
+ font-size: inherit;
65
+ overflow: visible;
66
+ vertical-align: -0.125em;
67
+ }
68
+
69
+ ul:global(.mde-header-group) {
70
+ display: flex !important;
71
+ flex-direction: row;
72
+ margin: 0;
73
+ padding: $mde-toolbar-padding;
74
+ list-style: none;
75
+ display: flex;
76
+ flex-wrap: nowrap;
77
+
78
+ &:global(.hidden) {
79
+ visibility: hidden;
80
+ }
81
+
82
+ li:global(.mde-header-item) {
83
+ display: inline-block;
84
+ position: relative;
85
+ margin: 0 4px;
86
+ button {
87
+ text-align: left;
88
+ cursor: pointer;
89
+ height: 22px;
90
+ padding: 4px;
91
+ margin: 0;
92
+ border: none;
93
+ background: none;
94
+ color: $mde-button-color;
95
+
96
+ &:global(.tooltipped) {
97
+ &:hover::before {
98
+ @include tooltip-animation();
99
+ opacity: 0;
100
+ position: absolute;
101
+ z-index: 1000001;
102
+ width: 0;
103
+ height: 0;
104
+ color: rgba(0, 0, 0, 0.8);
105
+ pointer-events: none;
106
+ content: '';
107
+ border: 5px solid transparent;
108
+ top: -5px;
109
+ right: 50%;
110
+ bottom: auto;
111
+ margin-right: -5px;
112
+ border-top-color: rgba(0, 0, 0, 0.8);
113
+ }
114
+ &:hover::after {
115
+ @include tooltip-animation();
116
+ font-size: 11px;
117
+ opacity: 0;
118
+ position: absolute;
119
+ z-index: 1000000;
120
+ padding: 5px 8px;
121
+ color: #fff;
122
+ pointer-events: none;
123
+ content: attr(aria-label);
124
+ background: rgba(0, 0, 0, 0.8);
125
+ border-radius: 3px;
126
+ right: 50%;
127
+ bottom: 100%;
128
+ transform: translateX(50%);
129
+ margin-bottom: 5px;
130
+ white-space: nowrap;
131
+ }
143
132
  }
144
133
  }
145
134
  }
146
135
  }
147
136
  }
148
- }
149
-
150
- :global(.mde-textarea-wrapper) {
151
- position: relative;
152
- margin: 2px;
153
-
154
- textarea:global(.mde-text) {
155
- width: 100%;
156
- border: 0;
157
- padding: $mde-editor-padding;
158
- vertical-align: top;
159
- resize: vertical;
160
- height: auto;
161
- overflow-y: auto;
162
- max-height: 200px;
163
- }
164
-
165
- textarea:focus {
166
- border: 2px solid blue !important;
167
- border-radius: 3px;
168
- outline: none;
169
- }
170
- }
171
137
 
172
- :global(.mde-preview) {
173
- :global(.mde-preview-content) {
174
- padding: $mde-preview-padding;
138
+ :global(.mde-textarea-wrapper) {
139
+ position: relative;
140
+ margin: 2px;
175
141
 
176
- p, blockquote, ul, ol, dl, table, pre {
177
- margin-top: 0;
178
- margin-bottom: 16px;
142
+ textarea:global(.mde-text) {
143
+ width: 100%;
144
+ border: 0;
145
+ padding: $mde-editor-padding;
146
+ vertical-align: top;
147
+ resize: vertical;
148
+ height: auto;
149
+ overflow-y: auto;
150
+ max-height: 200px;
179
151
  }
180
152
 
181
- h1, h2, h3 {
182
- margin-top: 24px;
183
- margin-bottom: 16px;
184
- font-weight: 600;
185
- line-height: 1.25;
186
- border-bottom: 1px solid #eee;
187
- padding-bottom: 0.3em;
188
- }
189
- h1 {
190
- font-size: 1.6em;
191
- }
192
- h2 {
193
- font-size: 1.4em;
194
- }
195
- h3 {
196
- font-size: 1.2em;
197
- }
198
- ul, ol {
199
- padding-left: 2em;
153
+ textarea:focus {
154
+ border: 2px solid blue !important;
155
+ border-radius: 3px;
156
+ outline: none;
200
157
  }
201
- blockquote {
202
- margin-left: 0;
203
- padding: 0 1em;
204
- color: #777;
205
- border-left: 0.25em solid #ddd;
206
- & > :first-child {
158
+ }
159
+
160
+ :global(.mde-preview) {
161
+ :global(.mde-preview-content) {
162
+ padding: $mde-preview-padding;
163
+
164
+ p,
165
+ blockquote,
166
+ ul,
167
+ ol,
168
+ dl,
169
+ table,
170
+ pre {
207
171
  margin-top: 0;
172
+ margin-bottom: 16px;
208
173
  }
209
- & > :last-child {
210
- margin-bottom: 0;
211
- }
212
- }
213
174
 
214
- code {
215
- padding: 0.2em 0 0.2em 0;
216
- margin: 0;
217
- font-size: 90%;
218
- background-color: rgba(0, 0, 0, 0.04);
219
- border-radius: 3px;
220
- &::before, &::after {
221
- letter-spacing: -0.2em;
222
- content: "\00a0";
175
+ h1,
176
+ h2,
177
+ h3 {
178
+ margin-top: 24px;
179
+ margin-bottom: 16px;
180
+ font-weight: 600;
181
+ line-height: 1.25;
182
+ border-bottom: 1px solid #eee;
183
+ padding-bottom: 0.3em;
184
+ }
185
+ h1 {
186
+ font-size: 1.6em;
187
+ }
188
+ h2 {
189
+ font-size: 1.4em;
190
+ }
191
+ h3 {
192
+ font-size: 1.2em;
193
+ }
194
+ ul,
195
+ ol {
196
+ padding-left: 2em;
197
+ }
198
+ blockquote {
199
+ margin-left: 0;
200
+ padding: 0 1em;
201
+ color: #777;
202
+ border-left: 0.25em solid #ddd;
203
+ & > :first-child {
204
+ margin-top: 0;
205
+ }
206
+ & > :last-child {
207
+ margin-bottom: 0;
208
+ }
223
209
  }
224
- }
225
-
226
- pre {
227
- padding: 16px;
228
- overflow: auto;
229
- font-size: 85%;
230
- line-height: 1.45;
231
- background-color: #f7f7f7;
232
- border-radius: 3px;
233
210
 
234
211
  code {
235
- display: inline;
236
- padding: 0;
212
+ padding: 0.2em 0 0.2em 0;
237
213
  margin: 0;
238
- overflow: visible;
239
- line-height: inherit;
240
- word-wrap: normal;
241
- background-color: transparent;
242
- border: 0;
243
- &::before, &::after {
244
- content: none;
214
+ font-size: 90%;
215
+ background-color: rgba(0, 0, 0, 0.04);
216
+ border-radius: 3px;
217
+ &::before,
218
+ &::after {
219
+ letter-spacing: -0.2em;
220
+ content: '\00a0';
245
221
  }
246
222
  }
247
223
 
248
- > code {
249
- padding: 0;
250
- margin: 0;
251
- font-size: 100%;
252
- word-break: normal;
253
- white-space: pre;
254
- background: transparent;
255
- border: 0;
256
- }
257
- }
224
+ pre {
225
+ padding: 16px;
226
+ overflow: auto;
227
+ font-size: 85%;
228
+ line-height: 1.45;
229
+ background-color: #f7f7f7;
230
+ border-radius: 3px;
231
+
232
+ code {
233
+ display: inline;
234
+ padding: 0;
235
+ margin: 0;
236
+ overflow: visible;
237
+ line-height: inherit;
238
+ word-wrap: normal;
239
+ background-color: transparent;
240
+ border: 0;
241
+ &::before,
242
+ &::after {
243
+ content: none;
244
+ }
245
+ }
258
246
 
259
- a {
260
- color: #4078c0;
261
- text-decoration: none;
262
- &:hover {
263
- text-decoration: underline;
247
+ > code {
248
+ padding: 0;
249
+ margin: 0;
250
+ font-size: 100%;
251
+ word-break: normal;
252
+ white-space: pre;
253
+ background: transparent;
254
+ border: 0;
255
+ }
264
256
  }
265
- }
266
- & > *:first-child {
267
- margin-top: 0 !important;
268
- }
269
- & > *:last-child {
270
- margin-bottom: 0 !important;
271
- }
272
- &::after {
273
- display: table;
274
- clear: both;
275
- content: "";
276
- }
277
257
 
278
- table {
279
- display: block;
280
- width: 100%;
281
- border-spacing: 0;
282
- border-collapse: collapse;
283
- thead {
284
- th {
285
- font-weight: bold;
258
+ a {
259
+ color: #4078c0;
260
+ text-decoration: none;
261
+ &:hover {
262
+ text-decoration: underline;
286
263
  }
287
264
  }
288
- th, td {
289
- padding: 6px 13px;
290
- border: 1px solid $mde-border-color;
265
+ & > *:first-child {
266
+ margin-top: 0 !important;
267
+ }
268
+ & > *:last-child {
269
+ margin-bottom: 0 !important;
270
+ }
271
+ &::after {
272
+ display: table;
273
+ clear: both;
274
+ content: '';
275
+ }
276
+
277
+ table {
278
+ display: block;
279
+ width: 100%;
280
+ border-spacing: 0;
281
+ border-collapse: collapse;
282
+ thead {
283
+ th {
284
+ font-weight: bold;
285
+ }
286
+ }
287
+ th,
288
+ td {
289
+ padding: 6px 13px;
290
+ border: 1px solid $mde-border-color;
291
+ }
291
292
  }
292
293
  }
293
294
  }
294
- }
295
295
 
296
- :global(.react-mde) {
297
- border: 1px solid $mde-border-color;
298
- border-radius: $mde-border-radius;
296
+ :global(.react-mde) {
297
+ border: 1px solid $mde-border-color;
298
+ border-radius: $mde-border-radius;
299
299
 
300
- * {
301
- box-sizing: border-box;
302
- }
300
+ * {
301
+ box-sizing: border-box;
302
+ }
303
303
 
304
- :global(.invisible) {
305
- display: none;
306
- }
304
+ :global(.invisible) {
305
+ display: none;
306
+ }
307
307
 
308
- :global(.image-tip) {
309
- user-select: none;
310
- display: flex !important;
311
- padding: 7px 10px;
312
- margin: 0;
313
- font-size: 13px;
314
- line-height: 16px;
315
- color: gray;
316
- background-color: $mde-toolbar-color;
317
- border-top: 1px solid $mde-border-color;
318
- position: relative;
308
+ :global(.image-tip) {
309
+ user-select: none;
310
+ display: flex !important;
311
+ padding: 7px 10px;
312
+ margin: 0;
313
+ font-size: 13px;
314
+ line-height: 16px;
315
+ color: gray;
316
+ background-color: $mde-toolbar-color;
317
+ border-top: 1px solid $mde-border-color;
318
+ position: relative;
319
319
 
320
- :global(.image-input) {
321
- min-height: 0;
322
- opacity: .01;
323
- width: 100% !important;
324
- position: absolute;
325
- top: 0;
326
- left: 0;
327
- padding: 5px;
328
- cursor: pointer;
320
+ :global(.image-input) {
321
+ min-height: 0;
322
+ opacity: 0.01;
323
+ width: 100% !important;
324
+ position: absolute;
325
+ top: 0;
326
+ left: 0;
327
+ padding: 5px;
328
+ cursor: pointer;
329
+ }
329
330
  }
330
331
  }
331
- }
332
332
 
333
- ul:global(.mde-suggestions) {
334
- position: absolute;
335
- min-width: 180px;
336
- padding: 0;
337
- margin: 20px 0 0;
338
- list-style: none;
339
- cursor: pointer;
340
- background: #fff;
341
- border: 1px solid $mde-border-color;
342
- border-radius: 3px;
343
- box-shadow: 0 1px 5px rgba(27, 31, 35, .15);
344
- background-color: blue !important;
345
-
346
- li {
347
- padding: 4px 8px;
348
- border-bottom: 1px solid #e1e4e8;
349
-
350
- &:first-child {
351
- border-top-left-radius: $mde-border-radius;
352
- border-top-right-radius: $mde-border-radius;
353
- }
333
+ ul:global(.mde-suggestions) {
334
+ position: absolute;
335
+ min-width: 180px;
336
+ padding: 0;
337
+ margin: 20px 0 0;
338
+ list-style: none;
339
+ cursor: pointer;
340
+ background: #fff;
341
+ border: 1px solid $mde-border-color;
342
+ border-radius: 3px;
343
+ box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);
344
+ background-color: blue !important;
354
345
 
355
- &:last-child {
356
- border-bottom-right-radius: $mde-border-radius;
357
- border-bottom-left-radius: $mde-border-radius;
358
- }
346
+ li {
347
+ padding: 4px 8px;
348
+ border-bottom: 1px solid #e1e4e8;
349
+
350
+ &:first-child {
351
+ border-top-left-radius: $mde-border-radius;
352
+ border-top-right-radius: $mde-border-radius;
353
+ }
359
354
 
360
- &:hover, &[aria-selected=true] {
361
- color: $mde-white-color;
362
- background-color: $mde-selected-color;
355
+ &:last-child {
356
+ border-bottom-right-radius: $mde-border-radius;
357
+ border-bottom-left-radius: $mde-border-radius;
358
+ }
359
+
360
+ &:hover,
361
+ &[aria-selected='true'] {
362
+ color: $mde-white-color;
363
+ background-color: $mde-selected-color;
364
+ }
363
365
  }
364
366
  }
365
- }
366
367
 
367
- :global(sub) {
368
- vertical-align: sub;
368
+ sub {
369
+ vertical-align: sub;
370
+ }
371
+
372
+ sup {
373
+ vertical-align: super;
374
+ }
369
375
  }
370
- :global(sup) {
371
- vertical-align: super;
372
- }