react-autoql 3.5.2 → 3.5.3

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,3 +1,93 @@
1
+ .react-autoql-icon {
2
+ position: relative;
3
+ opacity: 1; }
4
+ .react-autoql-icon.warning {
5
+ color: var(--react-autoql-warning-color) !important; }
6
+ .react-autoql-icon.danger {
7
+ color: var(--react-autoql-danger-color) !important; }
8
+
9
+ span.react-autoql-icon {
10
+ vertical-align: unset;
11
+ text-align: left;
12
+ margin: 0;
13
+ padding: 0;
14
+ float: none !important;
15
+ color: inherit; }
16
+ span.react-autoql-icon svg {
17
+ float: none !important;
18
+ color: inherit;
19
+ vertical-align: unset;
20
+ text-align: left;
21
+ margin: 0;
22
+ padding: 0;
23
+ opacity: 1;
24
+ height: 1em;
25
+ margin-bottom: -0.1em; }
26
+
27
+ .slack-logo {
28
+ display: inline-block;
29
+ height: 100%;
30
+ margin-bottom: 3px; }
31
+ .slack-logo img {
32
+ vertical-align: middle;
33
+ height: 1em;
34
+ width: 1em; }
35
+
36
+ .react-autoql-badge {
37
+ position: absolute;
38
+ background: var(--react-autoql-warning-color);
39
+ border: 1px solid var(--react-autoql-background-color-primary);
40
+ width: 0.5em;
41
+ height: 0.5em;
42
+ top: -0.1em;
43
+ right: -0.25em;
44
+ border-radius: 50%;
45
+ box-sizing: content-box; }
46
+
47
+ .loading-container-centered {
48
+ height: 100%;
49
+ width: 100%;
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: center;
53
+ align-items: center; }
54
+
55
+ .response-loading {
56
+ display: inline-block;
57
+ position: relative;
58
+ width: 64px;
59
+ height: 64px; }
60
+
61
+ .response-loading div {
62
+ position: absolute;
63
+ top: 27px;
64
+ width: 11px;
65
+ height: 11px;
66
+ border-radius: 50%;
67
+ background: #e2e2e2;
68
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
69
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
70
+
71
+ .response-loading div:nth-child(1) {
72
+ left: 6px;
73
+ -webkit-animation: response-loading1 0.6s infinite;
74
+ animation: response-loading1 0.6s infinite; }
75
+
76
+ .response-loading div:nth-child(2) {
77
+ left: 6px;
78
+ -webkit-animation: response-loading2 0.6s infinite;
79
+ animation: response-loading2 0.6s infinite; }
80
+
81
+ .response-loading div:nth-child(3) {
82
+ left: 26px;
83
+ -webkit-animation: response-loading2 0.6s infinite;
84
+ animation: response-loading2 0.6s infinite; }
85
+
86
+ .response-loading div:nth-child(4) {
87
+ left: 45px;
88
+ -webkit-animation: response-loading3 0.6s infinite;
89
+ animation: response-loading3 0.6s infinite; }
90
+
1
91
  @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
2
92
  .react-autoql-response-content-container:not(.html-content) {
3
93
  position: relative;
@@ -369,96 +459,6 @@
369
459
  100% {
370
460
  left: 82%; } }
371
461
 
372
- .react-autoql-icon {
373
- position: relative;
374
- opacity: 1; }
375
- .react-autoql-icon.warning {
376
- color: var(--react-autoql-warning-color) !important; }
377
- .react-autoql-icon.danger {
378
- color: var(--react-autoql-danger-color) !important; }
379
-
380
- span.react-autoql-icon {
381
- vertical-align: unset;
382
- text-align: left;
383
- margin: 0;
384
- padding: 0;
385
- float: none !important;
386
- color: inherit; }
387
- span.react-autoql-icon svg {
388
- float: none !important;
389
- color: inherit;
390
- vertical-align: unset;
391
- text-align: left;
392
- margin: 0;
393
- padding: 0;
394
- opacity: 1;
395
- height: 1em;
396
- margin-bottom: -0.1em; }
397
-
398
- .slack-logo {
399
- display: inline-block;
400
- height: 100%;
401
- margin-bottom: 3px; }
402
- .slack-logo img {
403
- vertical-align: middle;
404
- height: 1em;
405
- width: 1em; }
406
-
407
- .react-autoql-badge {
408
- position: absolute;
409
- background: var(--react-autoql-warning-color);
410
- border: 1px solid var(--react-autoql-background-color-primary);
411
- width: 0.5em;
412
- height: 0.5em;
413
- top: -0.1em;
414
- right: -0.25em;
415
- border-radius: 50%;
416
- box-sizing: content-box; }
417
-
418
- .loading-container-centered {
419
- height: 100%;
420
- width: 100%;
421
- display: flex;
422
- flex-direction: column;
423
- justify-content: center;
424
- align-items: center; }
425
-
426
- .response-loading {
427
- display: inline-block;
428
- position: relative;
429
- width: 64px;
430
- height: 64px; }
431
-
432
- .response-loading div {
433
- position: absolute;
434
- top: 27px;
435
- width: 11px;
436
- height: 11px;
437
- border-radius: 50%;
438
- background: #e2e2e2;
439
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
440
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
441
-
442
- .response-loading div:nth-child(1) {
443
- left: 6px;
444
- -webkit-animation: response-loading1 0.6s infinite;
445
- animation: response-loading1 0.6s infinite; }
446
-
447
- .response-loading div:nth-child(2) {
448
- left: 6px;
449
- -webkit-animation: response-loading2 0.6s infinite;
450
- animation: response-loading2 0.6s infinite; }
451
-
452
- .response-loading div:nth-child(3) {
453
- left: 26px;
454
- -webkit-animation: response-loading2 0.6s infinite;
455
- animation: response-loading2 0.6s infinite; }
456
-
457
- .response-loading div:nth-child(4) {
458
- left: 45px;
459
- -webkit-animation: response-loading3 0.6s infinite;
460
- animation: response-loading3 0.6s infinite; }
461
-
462
462
  .react-autoql-dashboard-container {
463
463
  background: var(--react-autoql-background-color-secondary);
464
464
  height: 100%;
@@ -1218,6 +1218,33 @@ span.react-autoql-icon {
1218
1218
  top: 30px;
1219
1219
  opacity: 0; } }
1220
1220
 
1221
+ .react-autoql-step-container a {
1222
+ color: var(--react-autoql-accent-color, #26a7df); }
1223
+
1224
+ .frequency-date-select-container {
1225
+ margin-top: 10px; }
1226
+
1227
+ .notification-frequency-step {
1228
+ display: flex; }
1229
+ .notification-frequency-step .frequency-category-select {
1230
+ position: relative;
1231
+ padding-top: 9px; }
1232
+ .notification-frequency-step .notification-frequency-select {
1233
+ margin-left: 8px; }
1234
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1235
+ line-height: 33px; }
1236
+ .notification-frequency-step .frequency-repeat-follow-text {
1237
+ line-height: 32px;
1238
+ vertical-align: top; }
1239
+ .notification-frequency-step .frequency-settings-container {
1240
+ flex: 0 1 400px; }
1241
+
1242
+ .schedule-builder-timezone-section {
1243
+ margin: 10px 5px; }
1244
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1245
+ display: inline-block;
1246
+ width: 300px; }
1247
+
1221
1248
  .react-autoql-notifications-button-container {
1222
1249
  position: relative;
1223
1250
  display: inline-block;
@@ -1251,70 +1278,124 @@ span.react-autoql-icon {
1251
1278
  left: 0.5em;
1252
1279
  top: -2px; }
1253
1280
 
1254
- .notification-modal-content .react-autoql-step-content p {
1255
- margin-bottom: 0.5em;
1256
- margin-top: 0.5em;
1257
- padding-left: 8px; }
1258
-
1259
- .notification-modal-content .step-btn-container {
1260
- text-align: right;
1261
- display: flex;
1262
- min-height: 50px; }
1263
-
1264
- .expression-valid-checkmark.react-autoql-icon svg {
1265
- color: var(--react-autoql-success-color); }
1266
-
1267
- .expression-invalid-message-container {
1268
- max-width: 75%;
1269
- float: left;
1270
- text-align: left !important;
1271
- display: flex;
1272
- flex-direction: row;
1273
- align-items: left;
1274
- justify-content: left; }
1275
-
1276
- .expression-invalid-message {
1277
- color: var(--react-autoql-danger-color);
1278
- display: 'inline-block'; }
1279
-
1280
- .notification-rule-add-btn-outer,
1281
- .notification-rule-validate-btn-outer {
1282
- text-align: center;
1283
- border-style: dashed !important;
1284
- height: 38px;
1285
- line-height: 25px;
1286
- margin: 0 !important;
1287
- overflow: hidden; }
1288
-
1289
- .notification-rule-outer-container {
1290
- position: relative;
1291
- border: 1px solid transparent;
1292
- border-radius: 4px; }
1293
- .notification-rule-outer-container.outlined {
1294
- border-color: rgba(0, 0, 0, 0.15);
1295
- padding: 0 20px;
1296
- padding-bottom: 12px; }
1297
-
1298
- .notification-outer-all-any {
1299
- position: absolute;
1300
- left: 0;
1301
- top: 50%; }
1302
-
1303
- .notification-first-group-btn-container {
1304
- display: flex;
1305
- justify-content: space-between; }
1281
+ .react-autoql-notification-settings {
1282
+ background-color: var(--react-autoql-background-color-secondary);
1283
+ color: var(--react-autoql-text-color-primary);
1284
+ padding-top: 20px;
1285
+ height: 100%; }
1286
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1287
+ margin: 20px;
1288
+ margin-top: 10px;
1289
+ border-radius: 4px;
1290
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1291
+ background-color: var(--react-autoql-background-color-primary);
1292
+ overflow: hidden; }
1293
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1294
+ height: 55px;
1295
+ line-height: 55px;
1296
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1297
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1298
+ margin-right: 10px;
1299
+ cursor: pointer; }
1300
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1301
+ padding-right: 20px;
1302
+ font-size: 17px;
1303
+ opacity: 1;
1304
+ cursor: pointer;
1305
+ color: var(--react-autoql-accent-color); }
1306
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1307
+ background: rgba(0, 0, 0, 0.01); }
1308
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1309
+ opacity: 0;
1310
+ margin-right: 20px;
1311
+ font-size: 16px;
1312
+ transition: all 0.2s ease;
1313
+ color: var(--react-autoql-text-color-primary);
1314
+ cursor: pointer; }
1315
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1316
+ color: var(--react-autoql-accent-color);
1317
+ opacity: 1 !important; }
1318
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1319
+ opacity: 0.5; }
1320
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1321
+ display: flex;
1322
+ justify-content: space-between;
1323
+ height: 56px;
1324
+ padding-left: 25px;
1325
+ padding-right: 8px;
1326
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1327
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1328
+ margin-bottom: 4px;
1329
+ margin-right: 8px; }
1330
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1331
+ margin-bottom: 4px;
1332
+ margin-right: 8px;
1333
+ opacity: 0.5;
1334
+ pointer-events: none; }
1335
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1336
+ display: flex;
1337
+ justify-content: space-between;
1338
+ align-items: center;
1339
+ padding: 5px 20px;
1340
+ padding-bottom: 0;
1341
+ color: var(--react-autoql-text-color-primary); }
1342
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1343
+ display: inline-block;
1344
+ height: 35px;
1345
+ width: 35px;
1346
+ border-radius: 20px;
1347
+ background: var(--react-autoql-accent-color, #26a7df);
1348
+ color: white;
1349
+ line-height: 38px;
1350
+ text-align: center;
1351
+ font-size: 20px;
1352
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1353
+ transition: all 0.2s ease;
1354
+ margin-right: 5px;
1355
+ cursor: pointer; }
1356
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1357
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1358
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1359
+ white-space: nowrap;
1360
+ overflow: hidden;
1361
+ text-overflow: ellipsis;
1362
+ padding-right: 10px; }
1363
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1364
+ opacity: 0.5; }
1365
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1366
+ vertical-align: middle;
1367
+ height: 18px; }
1368
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1369
+ display: flex;
1370
+ align-items: center;
1371
+ margin-top: -25px; }
1306
1372
 
1307
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1308
- border: none; }
1373
+ .notification-rule-add-btn-outer,
1374
+ .notification-rule-validate-btn-outer {
1375
+ text-align: center;
1376
+ border-style: dashed !important;
1377
+ height: 38px;
1378
+ line-height: 25px;
1379
+ margin: 0 !important;
1380
+ overflow: hidden; }
1309
1381
 
1310
1382
  .notification-rule-outer-container {
1311
1383
  position: relative;
1312
1384
  border: 1px solid transparent;
1313
- border-radius: 4px;
1314
- padding-bottom: 5px; }
1385
+ border-radius: 4px; }
1386
+ .notification-rule-outer-container.outlined {
1387
+ border-color: rgba(0, 0, 0, 0.15);
1388
+ padding: 0 20px;
1389
+ padding-bottom: 12px; }
1315
1390
 
1316
- .expression-error-message {
1317
- padding-left: 5px; }
1391
+ .notification-outer-all-any {
1392
+ position: absolute;
1393
+ left: 0;
1394
+ top: 50%; }
1395
+
1396
+ .notification-first-group-btn-container {
1397
+ display: flex;
1398
+ justify-content: space-between; }
1318
1399
 
1319
1400
  .data-alerts-container.read-only .react-autoql-notification-group-container {
1320
1401
  border: none; }
@@ -1634,124 +1715,43 @@ span.react-autoql-icon {
1634
1715
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1635
1716
  margin-bottom: -1px; }
1636
1717
 
1637
- .react-autoql-notification-settings {
1638
- background-color: var(--react-autoql-background-color-secondary);
1639
- color: var(--react-autoql-text-color-primary);
1640
- padding-top: 20px;
1641
- height: 100%; }
1642
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1643
- margin: 20px;
1644
- margin-top: 10px;
1645
- border-radius: 4px;
1646
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1647
- background-color: var(--react-autoql-background-color-primary);
1648
- overflow: hidden; }
1649
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1650
- height: 55px;
1651
- line-height: 55px;
1652
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1653
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1654
- margin-right: 10px;
1655
- cursor: pointer; }
1656
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1657
- padding-right: 20px;
1658
- font-size: 17px;
1659
- opacity: 1;
1660
- cursor: pointer;
1661
- color: var(--react-autoql-accent-color); }
1662
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1663
- background: rgba(0, 0, 0, 0.01); }
1664
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1665
- opacity: 0;
1666
- margin-right: 20px;
1667
- font-size: 16px;
1668
- transition: all 0.2s ease;
1669
- color: var(--react-autoql-text-color-primary);
1670
- cursor: pointer; }
1671
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1672
- color: var(--react-autoql-accent-color);
1673
- opacity: 1 !important; }
1674
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1675
- opacity: 0.5; }
1676
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1677
- display: flex;
1678
- justify-content: space-between;
1679
- height: 56px;
1680
- padding-left: 25px;
1681
- padding-right: 8px;
1682
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1683
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1684
- margin-bottom: 4px;
1685
- margin-right: 8px; }
1686
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1687
- margin-bottom: 4px;
1688
- margin-right: 8px;
1689
- opacity: 0.5;
1690
- pointer-events: none; }
1691
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1692
- display: flex;
1693
- justify-content: space-between;
1694
- align-items: center;
1695
- padding: 5px 20px;
1696
- padding-bottom: 0;
1697
- color: var(--react-autoql-text-color-primary); }
1698
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1699
- display: inline-block;
1700
- height: 35px;
1701
- width: 35px;
1702
- border-radius: 20px;
1703
- background: var(--react-autoql-accent-color, #26a7df);
1704
- color: white;
1705
- line-height: 38px;
1706
- text-align: center;
1707
- font-size: 20px;
1708
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1709
- transition: all 0.2s ease;
1710
- margin-right: 5px;
1711
- cursor: pointer; }
1712
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1713
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1714
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1715
- white-space: nowrap;
1716
- overflow: hidden;
1717
- text-overflow: ellipsis;
1718
- padding-right: 10px; }
1719
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1720
- opacity: 0.5; }
1721
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1722
- vertical-align: middle;
1723
- height: 18px; }
1724
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1725
- display: flex;
1726
- align-items: center;
1727
- margin-top: -25px; }
1718
+ .notification-rule-outer-container {
1719
+ position: relative;
1720
+ border: 1px solid transparent;
1721
+ border-radius: 4px;
1722
+ padding-bottom: 5px; }
1728
1723
 
1729
- .react-autoql-step-container a {
1730
- color: var(--react-autoql-accent-color, #26a7df); }
1724
+ .expression-error-message {
1725
+ padding-left: 5px; }
1731
1726
 
1732
- .frequency-date-select-container {
1733
- margin-top: 10px; }
1727
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1728
+ border: none; }
1734
1729
 
1735
- .notification-frequency-step {
1736
- display: flex; }
1737
- .notification-frequency-step .frequency-category-select {
1738
- position: relative;
1739
- padding-top: 9px; }
1740
- .notification-frequency-step .notification-frequency-select {
1741
- margin-left: 8px; }
1742
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1743
- line-height: 33px; }
1744
- .notification-frequency-step .frequency-repeat-follow-text {
1745
- line-height: 32px;
1746
- vertical-align: top; }
1747
- .notification-frequency-step .frequency-settings-container {
1748
- flex: 0 1 400px; }
1730
+ .notification-modal-content .react-autoql-step-content p {
1731
+ margin-bottom: 0.5em;
1732
+ margin-top: 0.5em;
1733
+ padding-left: 8px; }
1749
1734
 
1750
- .schedule-builder-timezone-section {
1751
- margin: 10px 5px; }
1752
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1753
- display: inline-block;
1754
- width: 300px; }
1735
+ .notification-modal-content .step-btn-container {
1736
+ text-align: right;
1737
+ display: flex;
1738
+ min-height: 50px; }
1739
+
1740
+ .expression-valid-checkmark.react-autoql-icon svg {
1741
+ color: var(--react-autoql-success-color); }
1742
+
1743
+ .expression-invalid-message-container {
1744
+ max-width: 75%;
1745
+ float: left;
1746
+ text-align: left !important;
1747
+ display: flex;
1748
+ flex-direction: row;
1749
+ align-items: left;
1750
+ justify-content: left; }
1751
+
1752
+ .expression-invalid-message {
1753
+ color: var(--react-autoql-danger-color);
1754
+ display: 'inline-block'; }
1755
1755
 
1756
1756
  .react-autoql-dashboard .react-grid-item {
1757
1757
  background: var(--react-autoql-background-color-primary, #fff);
@@ -2249,50 +2249,6 @@ span.react-autoql-icon {
2249
2249
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2250
2250
  background: inherit; }
2251
2251
 
2252
- .react-autoql-btn {
2253
- border-radius: 4px;
2254
- cursor: pointer;
2255
- outline: none !important;
2256
- transition: all 0.2s ease;
2257
- width: auto;
2258
- display: inline-block; }
2259
-
2260
- .react-autoql-btn.disabled {
2261
- opacity: 0.4;
2262
- cursor: not-allowed;
2263
- pointer-events: none; }
2264
-
2265
- .react-autoql-btn.small {
2266
- padding: 2px 8px;
2267
- margin: 2px 3px; }
2268
-
2269
- .react-autoql-btn.large {
2270
- padding: 5px 16px;
2271
- margin: 2px 5px; }
2272
-
2273
- .react-autoql-btn.default {
2274
- color: inherit;
2275
- border: 1px solid var(--react-autoql-border-color);
2276
- background: inherit; }
2277
- .react-autoql-btn.default:hover {
2278
- border-color: var(--react-autoql-accent-color);
2279
- color: var(--react-autoql-accent-color); }
2280
-
2281
- .react-autoql-btn.primary {
2282
- background: var(--react-autoql-accent-color);
2283
- border: 1px solid var(--react-autoql-accent-color);
2284
- color: white; }
2285
- .react-autoql-btn.primary:hover {
2286
- opacity: 0.8; }
2287
-
2288
- .react-autoql-btn.danger {
2289
- color: var(--react-autoql-danger-color, #ca0b00);
2290
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2291
- background: inherit; }
2292
- .react-autoql-btn.danger:hover {
2293
- background-color: var(--react-autoql-danger-color, #ca0b00);
2294
- color: #fff; }
2295
-
2296
2252
  .react-autoql-table-container {
2297
2253
  height: 100%;
2298
2254
  max-width: 100%;
@@ -2438,109 +2394,29 @@ the whole table when the filter button is clicked */
2438
2394
  min-height: 38px; }
2439
2395
 
2440
2396
  /* Center header titles */
2441
- .react-autoql-table .tabulator-header .tabulator-col {
2442
- text-align: center !important; }
2443
-
2444
- .react-autoql-table .tabulator-header .tabulator-col-title {
2445
- padding-left: 10px !important;
2446
- padding-right: 10px !important; }
2447
-
2448
- .filter-tag {
2449
- color: #2ecc40;
2450
- border: 1px solid;
2451
- padding: 2px 4px;
2452
- border-radius: 4px;
2453
- font-weight: 400;
2454
- font-size: 10px;
2455
- margin-right: 5px;
2456
- vertical-align: top;
2457
- line-height: 21px; }
2458
-
2459
- .comparison-value-positive {
2460
- color: #2ecc40; }
2461
-
2462
- .comparison-value-negative {
2463
- color: #e80000; }
2464
-
2465
- .ReactModal__Overlay {
2466
- background-color: transparent !important;
2467
- transition: background-color 0.2s ease-in-out;
2468
- z-index: 9999; }
2469
-
2470
- .ReactModal__Overlay--after-open {
2471
- background-color: rgba(0, 0, 0, 0.25) !important; }
2472
-
2473
- .ReactModal__Overlay--before-close {
2474
- background-color: transparent !important; }
2475
-
2476
- .ReactModal__Content {
2477
- display: flex;
2478
- flex-direction: column;
2479
- transform: scale(0);
2480
- transition: all 0.2s ease-in-out;
2481
- color: var(--react-autoql-text-color-primary);
2482
- border: 1px solid var(--react-autoql-border-color) !important;
2483
- background: var(--react-autoql-background-color-primary) !important;
2484
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2485
- padding: 0 !important;
2486
- margin: auto auto;
2487
- max-width: 90vw;
2488
- max-height: calc(100vh - 90px); }
2489
- .ReactModal__Content input.react-autoql-input,
2490
- .ReactModal__Content textarea.react-autoql-input,
2491
- .ReactModal__Content textarea {
2492
- border-color: var(--react-autoql-border-color);
2493
- color: var(--react-autoql-text-color-primary);
2494
- background: var(--react-autoql-background-color-primary, white); }
2495
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2496
- color: var(--react-autoql-text-color-placeholder); }
2497
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2498
- color: var(--react-autoql-text-color-placeholder); }
2499
- .ReactModal__Content input.react-autoql-input::placeholder,
2500
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2501
- .ReactModal__Content textarea::placeholder {
2502
- color: var(--react-autoql-text-color-placeholder); }
2503
-
2504
- .ReactModal__Overlay--after-open .ReactModal__Content {
2505
- transform: scale(1); }
2506
-
2507
- .ReactModal__Overlay--before-close .ReactModal__Content {
2508
- transform: scale(0); }
2509
-
2510
- .react-autoql-modal-header {
2511
- position: relative;
2512
- text-align: center;
2513
- flex: 0 0 52px;
2514
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2515
- padding: 14px 60px;
2516
- font-size: 16px; }
2397
+ .react-autoql-table .tabulator-header .tabulator-col {
2398
+ text-align: center !important; }
2517
2399
 
2518
- .react-autoql-modal-footer {
2519
- position: relative;
2520
- flex: 0 0 52px;
2521
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2522
- text-align: right;
2523
- padding: 8px 10px; }
2400
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2401
+ padding-left: 10px !important;
2402
+ padding-right: 10px !important; }
2524
2403
 
2525
- .react-autoql-modal-body {
2526
- display: flex;
2527
- flex-direction: column;
2528
- padding: 25px;
2529
- flex: 1;
2530
- overflow: hidden; }
2531
- .react-autoql-modal-body h3 {
2532
- color: var(--react-autoql-text-color-primary); }
2404
+ .filter-tag {
2405
+ color: #2ecc40;
2406
+ border: 1px solid;
2407
+ padding: 2px 4px;
2408
+ border-radius: 4px;
2409
+ font-weight: 400;
2410
+ font-size: 10px;
2411
+ margin-right: 5px;
2412
+ vertical-align: top;
2413
+ line-height: 21px; }
2533
2414
 
2534
- .react-autoql-modal-close-btn {
2535
- position: absolute !important;
2536
- top: 10px;
2537
- right: 18px;
2538
- font-size: 22px;
2539
- opacity: 0.6 !important;
2540
- cursor: pointer; }
2415
+ .comparison-value-positive {
2416
+ color: #2ecc40; }
2541
2417
 
2542
- .react-autoql-modal-close-btn:hover {
2543
- opacity: 1 !important; }
2418
+ .comparison-value-negative {
2419
+ color: #e80000; }
2544
2420
 
2545
2421
  .query-tips-page-container {
2546
2422
  height: 100%;
@@ -2714,6 +2590,50 @@ the whole table when the filter button is clicked */
2714
2590
  100% {
2715
2591
  opacity: 1; } }
2716
2592
 
2593
+ .react-autoql-btn {
2594
+ border-radius: 4px;
2595
+ cursor: pointer;
2596
+ outline: none !important;
2597
+ transition: all 0.2s ease;
2598
+ width: auto;
2599
+ display: inline-block; }
2600
+
2601
+ .react-autoql-btn.disabled {
2602
+ opacity: 0.4;
2603
+ cursor: not-allowed;
2604
+ pointer-events: none; }
2605
+
2606
+ .react-autoql-btn.small {
2607
+ padding: 2px 8px;
2608
+ margin: 2px 3px; }
2609
+
2610
+ .react-autoql-btn.large {
2611
+ padding: 5px 16px;
2612
+ margin: 2px 5px; }
2613
+
2614
+ .react-autoql-btn.default {
2615
+ color: inherit;
2616
+ border: 1px solid var(--react-autoql-border-color);
2617
+ background: inherit; }
2618
+ .react-autoql-btn.default:hover {
2619
+ border-color: var(--react-autoql-accent-color);
2620
+ color: var(--react-autoql-accent-color); }
2621
+
2622
+ .react-autoql-btn.primary {
2623
+ background: var(--react-autoql-accent-color);
2624
+ border: 1px solid var(--react-autoql-accent-color);
2625
+ color: white; }
2626
+ .react-autoql-btn.primary:hover {
2627
+ opacity: 0.8; }
2628
+
2629
+ .react-autoql-btn.danger {
2630
+ color: var(--react-autoql-danger-color, #ca0b00);
2631
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2632
+ background: inherit; }
2633
+ .react-autoql-btn.danger:hover {
2634
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2635
+ color: #fff; }
2636
+
2717
2637
  .autoql-options-toolbar {
2718
2638
  position: absolute;
2719
2639
  background: inherit;
@@ -2749,59 +2669,85 @@ the whole table when the filter button is clicked */
2749
2669
  .copy-sql-modal-content:hover .copy-sql-btn {
2750
2670
  opacity: 1; }
2751
2671
 
2752
- .react-autoql-cascader {
2672
+ .ReactModal__Overlay {
2673
+ background-color: transparent !important;
2674
+ transition: background-color 0.2s ease-in-out;
2675
+ z-index: 9999; }
2676
+
2677
+ .ReactModal__Overlay--after-open {
2678
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2679
+
2680
+ .ReactModal__Overlay--before-close {
2681
+ background-color: transparent !important; }
2682
+
2683
+ .ReactModal__Content {
2684
+ display: flex;
2685
+ flex-direction: column;
2686
+ transform: scale(0);
2687
+ transition: all 0.2s ease-in-out;
2688
+ color: var(--react-autoql-text-color-primary);
2689
+ border: 1px solid var(--react-autoql-border-color) !important;
2690
+ background: var(--react-autoql-background-color-primary) !important;
2691
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2692
+ padding: 0 !important;
2693
+ margin: auto auto;
2694
+ max-width: 90vw;
2695
+ max-height: calc(100vh - 90px); }
2696
+ .ReactModal__Content input.react-autoql-input,
2697
+ .ReactModal__Content textarea.react-autoql-input,
2698
+ .ReactModal__Content textarea {
2699
+ border-color: var(--react-autoql-border-color);
2700
+ color: var(--react-autoql-text-color-primary);
2701
+ background: var(--react-autoql-background-color-primary, white); }
2702
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2703
+ color: var(--react-autoql-text-color-placeholder); }
2704
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2705
+ color: var(--react-autoql-text-color-placeholder); }
2706
+ .ReactModal__Content input.react-autoql-input::placeholder,
2707
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2708
+ .ReactModal__Content textarea::placeholder {
2709
+ color: var(--react-autoql-text-color-placeholder); }
2710
+
2711
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2712
+ transform: scale(1); }
2713
+
2714
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2715
+ transform: scale(0); }
2716
+
2717
+ .react-autoql-modal-header {
2753
2718
  position: relative;
2754
- white-space: nowrap;
2755
- overflow: hidden;
2756
- min-width: 300px; }
2757
- .react-autoql-cascader .options-container {
2758
- transition: max-width 0.3s ease;
2759
- display: inline-block;
2760
- vertical-align: top;
2761
- padding: 0 10px;
2762
- margin: 10px 0;
2763
- width: 100%;
2764
- max-width: calc(100% - 20px);
2765
- white-space: pre-wrap; }
2766
- .react-autoql-cascader .options-container.hidden {
2767
- max-width: 0; }
2768
- .react-autoql-cascader .options-container.hidden span {
2769
- white-space: nowrap; }
2770
- .react-autoql-cascader .options-container.hidden .option {
2771
- opacity: 0;
2772
- pointer-events: none; }
2773
- .react-autoql-cascader .options-container .options-title {
2774
- padding: 4px;
2775
- padding-left: 10px;
2776
- font-weight: 600; }
2777
- .react-autoql-cascader .options-container .cascader-back-arrow {
2778
- position: absolute;
2779
- cursor: pointer;
2780
- top: 15px;
2781
- left: 0; }
2782
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2783
- opacity: 0.8; }
2784
- .react-autoql-cascader .options-container .option {
2785
- cursor: pointer;
2786
- padding: 4px;
2787
- display: flex;
2788
- justify-content: space-between;
2789
- border-radius: 2px;
2790
- padding-left: 10px; }
2791
- .react-autoql-cascader .options-container .option .option-arrow {
2792
- opacity: 0.7; }
2793
- .react-autoql-cascader .options-container .option .option-execute-icon {
2794
- opacity: 0;
2795
- color: #fff;
2796
- font-size: 16px;
2797
- vertical-align: middle; }
2798
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2799
- background-color: var(--react-autoql-accent-color, #26a7df);
2800
- color: #fff; }
2801
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2802
- opacity: 1; }
2803
- .react-autoql-cascader .options-container:not(:last-child) {
2804
- border-right: 1px solid #d3d3d352; }
2719
+ text-align: center;
2720
+ flex: 0 0 52px;
2721
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2722
+ padding: 14px 60px;
2723
+ font-size: 16px; }
2724
+
2725
+ .react-autoql-modal-footer {
2726
+ position: relative;
2727
+ flex: 0 0 52px;
2728
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2729
+ text-align: right;
2730
+ padding: 8px 10px; }
2731
+
2732
+ .react-autoql-modal-body {
2733
+ display: flex;
2734
+ flex-direction: column;
2735
+ padding: 25px;
2736
+ flex: 1;
2737
+ overflow: hidden; }
2738
+ .react-autoql-modal-body h3 {
2739
+ color: var(--react-autoql-text-color-primary); }
2740
+
2741
+ .react-autoql-modal-close-btn {
2742
+ position: absolute !important;
2743
+ top: 10px;
2744
+ right: 18px;
2745
+ font-size: 22px;
2746
+ opacity: 0.6 !important;
2747
+ cursor: pointer; }
2748
+
2749
+ .react-autoql-modal-close-btn:hover {
2750
+ opacity: 1 !important; }
2805
2751
 
2806
2752
  .chat-single-message-container {
2807
2753
  transition: background-color 0.2s ease;
@@ -3026,6 +2972,60 @@ so we dont have to redraw the whole table */
3026
2972
  transform: scale(1);
3027
2973
  transform-origin: 0% 100%; } }
3028
2974
 
2975
+ .react-autoql-cascader {
2976
+ position: relative;
2977
+ white-space: nowrap;
2978
+ overflow: hidden;
2979
+ min-width: 300px; }
2980
+ .react-autoql-cascader .options-container {
2981
+ transition: max-width 0.3s ease;
2982
+ display: inline-block;
2983
+ vertical-align: top;
2984
+ padding: 0 10px;
2985
+ margin: 10px 0;
2986
+ width: 100%;
2987
+ max-width: calc(100% - 20px);
2988
+ white-space: pre-wrap; }
2989
+ .react-autoql-cascader .options-container.hidden {
2990
+ max-width: 0; }
2991
+ .react-autoql-cascader .options-container.hidden span {
2992
+ white-space: nowrap; }
2993
+ .react-autoql-cascader .options-container.hidden .option {
2994
+ opacity: 0;
2995
+ pointer-events: none; }
2996
+ .react-autoql-cascader .options-container .options-title {
2997
+ padding: 4px;
2998
+ padding-left: 10px;
2999
+ font-weight: 600; }
3000
+ .react-autoql-cascader .options-container .cascader-back-arrow {
3001
+ position: absolute;
3002
+ cursor: pointer;
3003
+ top: 15px;
3004
+ left: 0; }
3005
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
3006
+ opacity: 0.8; }
3007
+ .react-autoql-cascader .options-container .option {
3008
+ cursor: pointer;
3009
+ padding: 4px;
3010
+ display: flex;
3011
+ justify-content: space-between;
3012
+ border-radius: 2px;
3013
+ padding-left: 10px; }
3014
+ .react-autoql-cascader .options-container .option .option-arrow {
3015
+ opacity: 0.7; }
3016
+ .react-autoql-cascader .options-container .option .option-execute-icon {
3017
+ opacity: 0;
3018
+ color: #fff;
3019
+ font-size: 16px;
3020
+ vertical-align: middle; }
3021
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
3022
+ background-color: var(--react-autoql-accent-color, #26a7df);
3023
+ color: #fff; }
3024
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
3025
+ opacity: 1; }
3026
+ .react-autoql-cascader .options-container:not(:last-child) {
3027
+ border-right: 1px solid #d3d3d352; }
3028
+
3029
3029
  .react-autoql-condition-lock-menu {
3030
3030
  min-width: 400px !important; }
3031
3031
 
@@ -3600,58 +3600,6 @@ tbody::-webkit-scrollbar-thumb {
3600
3600
  border-top-right-radius: 4px;
3601
3601
  border-bottom-right-radius: 4px; }
3602
3602
 
3603
- .react-autoql-input-container {
3604
- position: relative;
3605
- margin: 2px 5px;
3606
- display: inline-block; }
3607
- .react-autoql-input-container .react-autoql-input {
3608
- border: 1px solid rgba(0, 0, 0, 0.1);
3609
- border-radius: 4px;
3610
- line-height: 32px;
3611
- min-height: 34px;
3612
- padding: 0 10px;
3613
- width: 100%;
3614
- outline: none !important;
3615
- transition: all 0.2s ease;
3616
- transition-property: border-color, color, opacity; }
3617
- .react-autoql-input-container .react-autoql-input.with-icon {
3618
- padding-left: 38px; }
3619
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3620
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3621
- color: rgba(0, 0, 0, 0.2);
3622
- opacity: 1;
3623
- /* Firefox */
3624
- font-style: italic; }
3625
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3626
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3627
- color: rgba(0, 0, 0, 0.2);
3628
- opacity: 1;
3629
- /* Firefox */
3630
- font-style: italic; }
3631
- .react-autoql-input-container .react-autoql-input::placeholder {
3632
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3633
- color: rgba(0, 0, 0, 0.2);
3634
- opacity: 1;
3635
- /* Firefox */
3636
- font-style: italic; }
3637
- .react-autoql-input-container .react-autoql-input-icon {
3638
- position: absolute;
3639
- left: 12px;
3640
- top: 8px;
3641
- opacity: 0.4;
3642
- transition: all 0.2s ease; }
3643
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3644
- height: 17px;
3645
- width: 17px; }
3646
- .react-autoql-input-container:hover .react-autoql-input,
3647
- .react-autoql-input-container .react-autoql-input:focus {
3648
- border-color: var(--react-autoql-accent-color, #26a7df); }
3649
- .react-autoql-input-container:hover .react-autoql-input-icon,
3650
- .react-autoql-input-container .react-autoql-input-icon.focus {
3651
- opacity: 1;
3652
- color: var(--react-autoql-accent-color, #26a7df); }
3653
-
3654
-
3655
3603
  .viz-toolbar {
3656
3604
  position: absolute;
3657
3605
  background: inherit;
@@ -3683,75 +3631,6 @@ tbody::-webkit-scrollbar-thumb {
3683
3631
  .react-autoql-toolbar-btn:hover {
3684
3632
  opacity: 0.7; }
3685
3633
 
3686
- .react-autoql-steps-container {
3687
- margin: 10px; }
3688
-
3689
- .react-autoql-step-container {
3690
- position: relative;
3691
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3692
- margin-left: 12px;
3693
- padding-left: 20px;
3694
- padding-bottom: 5px;
3695
- transition: all 0.5s ease; }
3696
- .react-autoql-step-container.complete {
3697
- border-color: var(--react-autoql-accent-color, #26a7df); }
3698
- .react-autoql-step-container.complete .react-autoql-step-dot {
3699
- border-color: var(--react-autoql-accent-color, #26a7df);
3700
- background: var(--react-autoql-accent-color, #26a7df);
3701
- color: #fff; }
3702
- .react-autoql-step-container.error {
3703
- border-color: var(--react-autoql-warning-color); }
3704
- .react-autoql-step-container.error .react-autoql-step-dot {
3705
- border-color: var(--react-autoql-warning-color);
3706
- background: var(--react-autoql-warning-color);
3707
- color: white; }
3708
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3709
- pointer-events: none;
3710
- height: 10px;
3711
- opacity: 0;
3712
- margin: 0; }
3713
-
3714
- .react-autoql-step-dot {
3715
- position: absolute;
3716
- top: 0;
3717
- left: -10px;
3718
- height: 20px;
3719
- width: 20px;
3720
- border-radius: 15px;
3721
- background: var(--react-autoql-background-color-primary, #fff);
3722
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3723
- transition: all 0.5s ease;
3724
- font-size: 10.5px;
3725
- color: var(--react-autoql-text-color-placeholder, lightgray);
3726
- text-align: center; }
3727
-
3728
- .react-autoql-step-title-container:hover {
3729
- cursor: pointer;
3730
- transition: color 0.2s ease;
3731
- color: var(--react-autoql-accent-color, #26a7df); }
3732
-
3733
- .react-autoql-step-title {
3734
- font-weight: 500;
3735
- font-size: 15px;
3736
- line-height: 15px;
3737
- padding-top: 2px; }
3738
-
3739
- .react-autoql-step-subtitle {
3740
- font-size: 13px;
3741
- padding-top: 6px;
3742
- padding-bottom: 6px;
3743
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3744
-
3745
- .react-autoql-step-content {
3746
- margin: 15px;
3747
- margin-top: 0; }
3748
-
3749
- .react-autoql-step-content-container {
3750
- transition-timing-function: ease;
3751
- transition-property: height, opacity, margin;
3752
- transition-duration: 0.5s;
3753
- opacity: 1; }
3754
-
3755
3634
  .content {
3756
3635
  margin: 2rem; }
3757
3636
 
@@ -3884,6 +3763,127 @@ tbody::-webkit-scrollbar-thumb {
3884
3763
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3885
3764
  background: var(--react-autoql-accent-color); }
3886
3765
 
3766
+
3767
+ .react-autoql-input-container {
3768
+ position: relative;
3769
+ margin: 2px 5px;
3770
+ display: inline-block; }
3771
+ .react-autoql-input-container .react-autoql-input {
3772
+ border: 1px solid rgba(0, 0, 0, 0.1);
3773
+ border-radius: 4px;
3774
+ line-height: 32px;
3775
+ min-height: 34px;
3776
+ padding: 0 10px;
3777
+ width: 100%;
3778
+ outline: none !important;
3779
+ transition: all 0.2s ease;
3780
+ transition-property: border-color, color, opacity; }
3781
+ .react-autoql-input-container .react-autoql-input.with-icon {
3782
+ padding-left: 38px; }
3783
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3784
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3785
+ color: rgba(0, 0, 0, 0.2);
3786
+ opacity: 1;
3787
+ /* Firefox */
3788
+ font-style: italic; }
3789
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3790
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3791
+ color: rgba(0, 0, 0, 0.2);
3792
+ opacity: 1;
3793
+ /* Firefox */
3794
+ font-style: italic; }
3795
+ .react-autoql-input-container .react-autoql-input::placeholder {
3796
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3797
+ color: rgba(0, 0, 0, 0.2);
3798
+ opacity: 1;
3799
+ /* Firefox */
3800
+ font-style: italic; }
3801
+ .react-autoql-input-container .react-autoql-input-icon {
3802
+ position: absolute;
3803
+ left: 12px;
3804
+ top: 8px;
3805
+ opacity: 0.4;
3806
+ transition: all 0.2s ease; }
3807
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3808
+ height: 17px;
3809
+ width: 17px; }
3810
+ .react-autoql-input-container:hover .react-autoql-input,
3811
+ .react-autoql-input-container .react-autoql-input:focus {
3812
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3813
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3814
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3815
+ opacity: 1;
3816
+ color: var(--react-autoql-accent-color, #26a7df); }
3817
+
3818
+ .react-autoql-steps-container {
3819
+ margin: 10px; }
3820
+
3821
+ .react-autoql-step-container {
3822
+ position: relative;
3823
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3824
+ margin-left: 12px;
3825
+ padding-left: 20px;
3826
+ padding-bottom: 5px;
3827
+ transition: all 0.5s ease; }
3828
+ .react-autoql-step-container.complete {
3829
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3830
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3831
+ border-color: var(--react-autoql-accent-color, #26a7df);
3832
+ background: var(--react-autoql-accent-color, #26a7df);
3833
+ color: #fff; }
3834
+ .react-autoql-step-container.error {
3835
+ border-color: var(--react-autoql-warning-color); }
3836
+ .react-autoql-step-container.error .react-autoql-step-dot {
3837
+ border-color: var(--react-autoql-warning-color);
3838
+ background: var(--react-autoql-warning-color);
3839
+ color: white; }
3840
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3841
+ pointer-events: none;
3842
+ height: 10px;
3843
+ opacity: 0;
3844
+ margin: 0; }
3845
+
3846
+ .react-autoql-step-dot {
3847
+ position: absolute;
3848
+ top: 0;
3849
+ left: -10px;
3850
+ height: 20px;
3851
+ width: 20px;
3852
+ border-radius: 15px;
3853
+ background: var(--react-autoql-background-color-primary, #fff);
3854
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3855
+ transition: all 0.5s ease;
3856
+ font-size: 10.5px;
3857
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3858
+ text-align: center; }
3859
+
3860
+ .react-autoql-step-title-container:hover {
3861
+ cursor: pointer;
3862
+ transition: color 0.2s ease;
3863
+ color: var(--react-autoql-accent-color, #26a7df); }
3864
+
3865
+ .react-autoql-step-title {
3866
+ font-weight: 500;
3867
+ font-size: 15px;
3868
+ line-height: 15px;
3869
+ padding-top: 2px; }
3870
+
3871
+ .react-autoql-step-subtitle {
3872
+ font-size: 13px;
3873
+ padding-top: 6px;
3874
+ padding-bottom: 6px;
3875
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3876
+
3877
+ .react-autoql-step-content {
3878
+ margin: 15px;
3879
+ margin-top: 0; }
3880
+
3881
+ .react-autoql-step-content-container {
3882
+ transition-timing-function: ease;
3883
+ transition-property: height, opacity, margin;
3884
+ transition-duration: 0.5s;
3885
+ opacity: 1; }
3886
+
3887
3887
  .notification-read-only-group {
3888
3888
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3889
3889
  border-radius: 4px;