@examind/block-editor 0.1.40 → 0.2.0

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.
Files changed (4) hide show
  1. package/dist/index.css +887 -802
  2. package/dist/index.js +13390 -11836
  3. package/dist/index.mjs +14161 -12571
  4. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -1347,345 +1347,181 @@ sl-progress-bar {
1347
1347
  }
1348
1348
  }
1349
1349
 
1350
- /* src/styles/article-typography.css */
1350
+ /* src/styles/article-callout-box.css */
1351
1351
  .be-article {
1352
- --be-ol-list-style-type: decimal;
1353
- kbd {
1354
- background-color: var(--sl-color-neutral-100);
1355
- color: var(--sl-color-neutral-700);
1356
- padding-inline: var(--sl-spacing-2x-small);
1357
- border-radius: var(--sl-border-radius-small);
1358
- font-family: var(--sl-font-mono), monospace;
1359
- font-style: normal;
1360
- padding-block: var(--sl-spacing-2x-small);
1361
- font-weight: 600;
1362
- }
1363
- p {
1352
+ .callout-box-wrapper {
1364
1353
  position: relative;
1365
- text-wrap: wrap;
1366
- font-weight: normal;
1367
- font-size: var(--sl-font-size-medium);
1368
- letter-spacing: var(--sl-letter-spacing-normal);
1369
1354
  margin-top: var(--sl-spacing-large);
1370
1355
  margin-bottom: var(--sl-spacing-large);
1371
- line-height: var(--sl-line-height-normal);
1372
- color: var(--sl-color-neutral-900);
1373
- }
1374
- p {
1375
- > code span {
1376
- background-color: var(--sl-color-neutral-100);
1377
- padding-inline: var(--sl-spacing-2x-small);
1378
- border-radius: var(--sl-border-radius-small);
1379
- border-color: var(--sl-color-neutral-200);
1380
- border-style: solid;
1381
- border-width: 1px;
1382
- font-family: var(--sl-font-mono), monospace;
1383
- font-style: normal;
1384
- font-size: inherit;
1385
- padding-block: var(--sl-spacing-3x-small);
1386
- font-weight: var(--sl-font-weight-normal);
1387
- z-index: 0;
1356
+ &[data-settings-node-selected] {
1357
+ outline: 1px solid var(--be-settings-node-selected-border-color) !important;
1358
+ outline-offset: 3px !important;
1359
+ border-radius: var(--sl-border-radius-small) !important;
1388
1360
  }
1389
1361
  }
1390
- p:first-child {
1362
+ .callout-box-wrapper:first-child {
1391
1363
  margin-top: 0;
1392
1364
  }
1393
- p:last-child {
1365
+ .callout-box-wrapper:last-child {
1394
1366
  margin-bottom: 0;
1395
1367
  }
1396
- .hr-wrapper {
1368
+ .callout-box {
1397
1369
  position: relative;
1398
- margin-top: calc(var(--sl-spacing-large) / 2);
1399
- padding-bottom: calc(var(--sl-spacing-large) / 2);
1400
- margin-bottom: calc(var(--sl-spacing-large) / 2);
1370
+ display: flex;
1371
+ flex-direction: row;
1372
+ align-items: start;
1373
+ gap: var(--sl-spacing-small);
1401
1374
  width: 100%;
1402
- hr {
1403
- position: relative;
1404
- margin-bottom: 0;
1405
- margin-top: 0;
1406
- border-width: 0;
1407
- border-top: 1px solid var(--sl-color-neutral-300);
1408
- }
1375
+ border-radius: var(--sl-border-radius-small);
1376
+ padding: var(--sl-spacing-small);
1409
1377
  }
1410
- blockquote {
1411
- position: relative;
1412
- font-weight: 500;
1413
- font-style: italic;
1414
- color: var(--sl-color-neutral-600);
1415
- border-left-style: solid;
1416
- border-left-width: 0.15rem;
1417
- border-left-color: var(--sl-color-neutral-300);
1418
- padding-left: 0.5rem;
1419
- quotes: "\\201C" "\\201D" "\\2018" "\\2019";
1420
- margin-top: var(--sl-spacing-large);
1421
- margin-bottom: var(--sl-spacing-large);
1378
+ .callout-box-icon {
1379
+ padding-top: calc(var(--sl-spacing-2x-small) + 2px);
1380
+ padding-left: var(--sl-spacing-2x-small);
1381
+ padding-right: var(--sl-spacing-2x-small);
1382
+ line-height: var(--sl-line-height-dense);
1383
+ display: flex;
1384
+ align-items: center;
1385
+ justify-content: center;
1386
+ sl-icon {
1387
+ width: 1em;
1388
+ height: 1em;
1389
+ }
1422
1390
  }
1423
- ol {
1391
+ .callout-box-content {
1424
1392
  position: relative;
1425
- margin-bottom: var(--sl-spacing-large);
1426
- padding-left: var(--sl-spacing-x-large);
1427
- list-style-type: var(--be-ol-list-style-type);
1428
- font-size: var(--sl-font-size-medium);
1429
- li {
1430
- padding-left: var(--sl-spacing-2x-small);
1431
- ol {
1432
- margin-bottom: 0;
1433
- }
1434
- }
1435
- li::marker {
1436
- font-weight: 400;
1437
- color: var(--sl-color-neutral-500);
1393
+ padding-block: var(--sl-spacing-2x-small);
1394
+ flex-grow: 1;
1395
+ --sl-font-size-base: 0.9rem;
1396
+ --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
1397
+ --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
1398
+ --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
1399
+ --sl-font-size-medium: var(--sl-font-size-base);
1400
+ --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
1401
+ --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
1402
+ --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
1403
+ --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
1404
+ --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
1405
+ p,
1406
+ h1,
1407
+ h2,
1408
+ h3 {
1409
+ color: inherit;
1410
+ margin-top: 0;
1411
+ margin-bottom: 0;
1412
+ line-height: var(--sl-line-height-normal);
1438
1413
  }
1439
1414
  }
1440
- ul {
1415
+ }
1416
+
1417
+ /* src/styles/article-custom-question.css */
1418
+ .be-article {
1419
+ .custom-question-wrapper {
1441
1420
  position: relative;
1421
+ margin-top: var(--sl-spacing-large);
1442
1422
  margin-bottom: var(--sl-spacing-large);
1443
- padding-left: var(--sl-spacing-x-large);
1444
- list-style-type: disc;
1445
- font-size: var(--sl-font-size-medium);
1446
- li {
1447
- padding-left: var(--sl-spacing-2x-small);
1448
- ul {
1449
- margin-bottom: 0;
1450
- }
1451
- }
1452
- li::marker {
1453
- color: var(--sl-color-neutral-400);
1423
+ &[data-settings-node-selected] {
1424
+ outline: 1px solid var(--be-settings-node-selected-border-color) !important;
1425
+ outline-offset: 3px !important;
1426
+ border-radius: var(--sl-border-radius-small) !important;
1454
1427
  }
1455
1428
  }
1456
- li {
1457
- margin-top: var(--sl-spacing-2x-small);
1458
- margin-bottom: var(--sl-spacing-2x-small);
1459
- }
1460
- ul li:has(ul),
1461
- ol li:has(ol) {
1462
- list-style: none;
1463
- }
1464
- ol ol {
1465
- list-style-type: lower-alpha;
1466
- list-style-position: outside;
1429
+ .custom-question-wrapper:first-child {
1430
+ margin-top: 0;
1467
1431
  }
1468
- ol ol ol {
1469
- list-style-type: upper-roman;
1470
- list-style-position: outside;
1432
+ .custom-question-wrapper:last-child {
1433
+ margin-bottom: 0;
1471
1434
  }
1472
- ul ul {
1473
- list-style-type: circle;
1474
- list-style-position: outside;
1435
+ .custom-question-prompt {
1436
+ position: relative;
1437
+ display: flex;
1438
+ flex-direction: column;
1439
+ gap: 6px;
1475
1440
  }
1476
- ul ul ul {
1477
- list-style-type: square;
1478
- list-style-position: outside;
1441
+ .custom-question-prompt-title {
1442
+ font-size: 10px;
1443
+ color: var(--sl-color-neutral-1000);
1444
+ line-height: 16px;
1445
+ text-transform: uppercase;
1479
1446
  }
1480
- a {
1447
+ .custom-question-prompt-content {
1481
1448
  position: relative;
1482
- color: var(--sl-color-primary-700);
1483
- text-underline-offset: 2px;
1484
- cursor: pointer;
1485
- }
1486
- a:hover {
1487
- text-decoration: underline;
1449
+ display: flex;
1450
+ flex-direction: column;
1451
+ align-items: center;
1452
+ justify-content: center;
1453
+ color: var(--sl-color-neutral-600);
1454
+ padding: var(--sl-spacing-small);
1455
+ border: 1px solid var(--sl-color-neutral-300);
1456
+ border-radius: var(--sl-border-radius-medium);
1457
+ border-color: var(--sl-color-neutral-300);
1458
+ background-color: var(--sl-color-neutral-50);
1488
1459
  }
1489
- h1 {
1460
+ }
1461
+
1462
+ /* src/styles/article-essay-question.css */
1463
+ .be-article {
1464
+ .essay-question-wrapper {
1490
1465
  position: relative;
1491
- text-wrap: balance;
1492
- font-weight: 700;
1493
- font-size: var(--sl-font-size-2x-large);
1494
- letter-spacing: var(--sl-letter-spacing-dense);
1495
- margin-top: var(--sl-spacing-2x-large);
1466
+ margin-top: var(--sl-spacing-large);
1496
1467
  margin-bottom: var(--sl-spacing-large);
1497
- line-height: var(--sl-line-height-x-denser);
1498
- color: inherit;
1499
- strong {
1500
- font-weight: 800;
1468
+ &[data-settings-node-selected] {
1469
+ outline: 1px solid var(--be-settings-node-selected-border-color) !important;
1470
+ outline-offset: 3px !important;
1471
+ border-radius: var(--sl-border-radius-small) !important;
1501
1472
  }
1502
1473
  }
1503
- h1:first-child {
1474
+ .essay-question-wrapper:first-child {
1504
1475
  margin-top: 0;
1505
1476
  }
1506
- h1:last-child {
1477
+ .essay-question-wrapper:last-child {
1507
1478
  margin-bottom: 0;
1508
1479
  }
1509
- h2 {
1480
+ .essay-question-prompt {
1510
1481
  position: relative;
1511
- text-wrap: balance;
1512
- font-weight: 600;
1513
- font-size: var(--sl-font-size-x-large);
1514
- letter-spacing: var(--sl-letter-spacing-dense);
1515
- margin-top: var(--sl-spacing-2x-large);
1516
- margin-bottom: var(--sl-spacing-large);
1517
- line-height: var(--sl-line-height-denser);
1518
- color: inherit;
1519
- }
1520
- h2:first-child {
1521
- margin-top: 0;
1482
+ display: flex;
1483
+ flex-direction: column;
1484
+ gap: var(--sl-spacing-2x-small);
1522
1485
  }
1523
- h2:last-child {
1524
- margin-bottom: 0;
1486
+ .essay-question-prompt-title {
1487
+ font-size: var(--sl-font-size-medium);
1488
+ font-weight: var(--sl-font-weight-bold);
1489
+ color: var(--sl-color-neutral-600);
1525
1490
  }
1526
- h3 {
1491
+ .essay-question-prompt-content {
1527
1492
  position: relative;
1528
- text-wrap: balance;
1529
- font-weight: 600;
1530
- font-size: var(--sl-font-size-large);
1531
- letter-spacing: var(--sl-letter-spacing-dense);
1532
- margin-top: var(--sl-spacing-x-large);
1533
- margin-bottom: var(--sl-spacing-large);
1534
- line-height: var(--sl-line-height-dense);
1535
- color: inherit;
1536
- }
1537
- h3:first-child {
1538
- margin-top: 0;
1539
- }
1540
- h3:last-child {
1541
- margin-bottom: 0;
1542
- }
1543
- h4 {
1544
- position: relative;
1545
- text-wrap: balance;
1546
- font-weight: 600;
1547
- font-size: var(--sl-font-size-medium);
1548
- letter-spacing: var(--sl-letter-spacing-dense);
1549
- margin-top: var(--sl-spacing-x-large);
1550
- margin-bottom: var(--sl-spacing-large);
1551
- line-height: var(--sl-line-height-denser);
1552
- color: inherit;
1553
- }
1554
- h4:first-child {
1555
- margin-top: 0;
1556
- }
1557
- h4:last-child {
1558
- margin-bottom: 0;
1559
- }
1560
- .hr-selected {
1493
+ display: flex;
1494
+ flex-direction: column;
1495
+ gap: var(--sl-spacing-2x-small);
1496
+ padding-top: var(--sl-spacing-2x-small);
1497
+ padding-left: var(--sl-spacing-small);
1498
+ padding-right: var(--sl-spacing-small);
1499
+ padding-bottom: var(--sl-spacing-small);
1500
+ border: 1px solid var(--sl-color-neutral-300);
1561
1501
  border-radius: var(--sl-border-radius-medium);
1562
- outline: 1px dashed var(--sl-color-primary-500);
1563
- }
1564
- .text-bold,
1565
- .text-italic,
1566
- .text-subscript,
1567
- .text-superscript,
1568
- .text-underline,
1569
- .text-strikethrough,
1570
- .text-underline-strikethrough {
1571
- color: inherit;
1572
- }
1573
- .text-italic {
1574
- font-style: italic;
1575
- }
1576
- .text-underline {
1577
- text-decoration: underline;
1578
- text-underline-offset: 2px;
1579
- }
1580
- .text-strikethrough {
1581
- text-decoration: line-through;
1582
- }
1583
- .text-underline-strikethrough {
1584
- text-decoration: underline line-through;
1585
- text-underline-offset: 2px;
1586
- }
1587
- }
1588
-
1589
- /* src/styles/article-table-box.css */
1590
- .be-article {
1591
- .table-box-wrapper {
1592
- position: relative;
1593
- width: 100%;
1594
- margin-top: var(--sl-spacing-large);
1595
- margin-bottom: var(--sl-spacing-large);
1596
- overflow-y: hidden;
1597
- overflow-x: auto;
1598
- }
1599
- .table-box-wrapper:first-child {
1600
- margin-top: 0;
1601
- }
1602
- .table-box-wrapper:last-child {
1603
- margin-bottom: 0;
1604
- }
1605
- .table-box {
1606
- position: relative;
1607
- width: 100%;
1608
- overflow-y: hidden;
1609
- overflow-x: auto;
1610
- }
1611
- table {
1612
- position: relative;
1613
- width: fit-content;
1614
- table-layout: fixed;
1615
- border-radius: var(--sl-border-radius-small);
1616
- border-collapse: collapse;
1617
- border-spacing: 0;
1618
- overflow: hidden;
1619
- }
1620
- th,
1621
- td {
1622
- position: relative;
1623
- padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
1624
- text-align: left;
1625
- vertical-align: top;
1626
- border: 1px solid var(--sl-color-neutral-200);
1627
- }
1628
- th,
1629
- td {
1502
+ border-color: var(--sl-color-neutral-300);
1503
+ background-color: var(--sl-color-neutral-50);
1504
+ .title {
1505
+ color: var(--sl-color-neutral-500);
1506
+ display: flex;
1507
+ flex-direction: row;
1508
+ align-items: center;
1509
+ gap: var(--sl-spacing-x-small);
1510
+ font-size: var(--sl-font-size-x-small);
1511
+ }
1630
1512
  p,
1631
1513
  h1,
1632
1514
  h2,
1633
1515
  h3 {
1516
+ color: inherit;
1634
1517
  margin-top: 0;
1635
1518
  margin-bottom: 0;
1519
+ line-height: var(--sl-line-height-normal);
1636
1520
  }
1637
1521
  }
1638
- [data-lexical-row-striping=true],
1639
- [data-lexical-row-striping=true] > table,
1640
- [data-lexical-row-striping=true] > table > tbody {
1641
- & > tr:nth-child(odd) td {
1642
- background-color: var(--sl-color-neutral-0);
1643
- }
1644
- & > tr:nth-child(even) td {
1645
- background-color: var(--sl-color-neutral-50);
1646
- }
1647
- }
1648
- th {
1649
- background-color: var(--sl-color-neutral-100);
1650
- * {
1651
- font-weight: var(--sl-font-weight-bold);
1652
- }
1653
- }
1654
- th[data-editor-table-column-key]::before {
1655
- content: " ";
1656
- position: absolute;
1657
- top: 0;
1658
- right: -10px;
1659
- width: 20px;
1660
- bottom: 0;
1661
- z-index: 10;
1662
- }
1663
- td {
1664
- background-color: var(--sl-color-neutral-0);
1665
- }
1666
- .table-selected {
1667
- outline: 2px solid rgb(60, 132, 244);
1668
- }
1669
- .table-selection *::selection {
1670
- background-color: transparent;
1671
- }
1672
- .table-cell-selected {
1673
- caret-color: transparent;
1674
- }
1675
- .table-cell-selected::after {
1676
- position: absolute;
1677
- left: 0;
1678
- right: 0;
1679
- bottom: 0;
1680
- top: 0;
1681
- background-color: var(--be-bg-color-table-selection);
1682
- mix-blend-mode: normal;
1683
- content: "";
1684
- pointer-events: none;
1685
- }
1686
1522
  }
1687
1523
 
1688
- /* src/styles/article-tabs-group.css */
1524
+ /* src/styles/article-excel-question.css */
1689
1525
  .be-article {
1690
1526
  .tabs-group-wrapper {
1691
1527
  display: flex;
@@ -1701,6 +1537,9 @@ sl-progress-bar {
1701
1537
  padding-bottom: 0;
1702
1538
  padding-left: 0;
1703
1539
  padding-right: 0;
1540
+ display: flex;
1541
+ flex-direction: column;
1542
+ gap: var(--sl-spacing-small);
1704
1543
  }
1705
1544
  }
1706
1545
  .tabs-group-wrapper:hover {
@@ -1710,177 +1549,263 @@ sl-progress-bar {
1710
1549
  outline-width: 1px;
1711
1550
  border-radius: var(--sl-border-radius-small);
1712
1551
  }
1552
+ .excel-question-tasks {
1553
+ display: flex;
1554
+ flex-direction: column;
1555
+ gap: var(--sl-spacing-small);
1556
+ .excel-question-task {
1557
+ display: flex;
1558
+ flex-direction: column;
1559
+ gap: var(--sl-spacing-small);
1560
+ .excel-question-task-title {
1561
+ display: flex;
1562
+ flex-direction: row;
1563
+ gap: var(--sl-spacing-small);
1564
+ align-items: center;
1565
+ .excel-question-task-title-index {
1566
+ display: flex;
1567
+ flex-direction: column;
1568
+ align-items: center;
1569
+ justify-content: center;
1570
+ position: relative;
1571
+ flex: 0 0 2.5em;
1572
+ height: 2.5em;
1573
+ padding: var(--sl-spacing-3x-small);
1574
+ border: 1px solid var(--sl-color-neutral-300);
1575
+ border-radius: 50%;
1576
+ font-size: var(--sl-font-size-small);
1577
+ font-weight: bold;
1578
+ color: var(--sl-color-neutral-500);
1579
+ }
1580
+ }
1581
+ .excel-question-task-body {
1582
+ display: flex;
1583
+ flex-direction: row;
1584
+ gap: var(--sl-spacing-small);
1585
+ align-items: stretch;
1586
+ .excel-question-task-sideline {
1587
+ width: 2.5em;
1588
+ position: relative;
1589
+ font-size: var(--sl-font-size-small);
1590
+ }
1591
+ .excel-question-task-sideline::before {
1592
+ content: "";
1593
+ position: absolute;
1594
+ top: 0;
1595
+ left: 50%;
1596
+ width: 0;
1597
+ height: 100%;
1598
+ border-left: 1px solid var(--sl-color-neutral-300);
1599
+ }
1600
+ .excel-question-task-content {
1601
+ display: flex;
1602
+ flex-direction: column;
1603
+ gap: var(--sl-spacing-small);
1604
+ flex: 1;
1605
+ .excel-question-task-content-item {
1606
+ display: flex;
1607
+ flex-direction: row;
1608
+ align-items: start;
1609
+ gap: var(--sl-spacing-x-small);
1610
+ .excel-question-task-content-item-point {
1611
+ position: relative;
1612
+ flex: 0 0 1.7em;
1613
+ height: 1.7em;
1614
+ padding: var(--sl-spacing-3x-small);
1615
+ display: flex;
1616
+ flex-direction: column;
1617
+ align-items: center;
1618
+ justify-content: center;
1619
+ }
1620
+ .excel-question-task-content-item-editor {
1621
+ flex: 1;
1622
+ }
1623
+ }
1624
+ }
1625
+ }
1626
+ }
1627
+ }
1628
+ .excel-worksheet-link {
1629
+ color: var(--sl-color-primary-800);
1630
+ font-weight: var(--sl-font-weight-bold);
1631
+ text-decoration: none;
1632
+ cursor: pointer;
1633
+ }
1713
1634
  }
1714
1635
 
1715
- /* src/styles/article-image-box.css */
1636
+ /* src/styles/article-fill-in-the-blank-question.css */
1716
1637
  .be-article {
1717
- .image-box-wrapper {
1638
+ --space-highlight-border-width: 3px;
1639
+ .fill-in-the-blank-question-wrapper {
1640
+ position: relative;
1718
1641
  margin-top: var(--sl-spacing-large);
1719
1642
  margin-bottom: var(--sl-spacing-large);
1720
- display: flex;
1721
- flex-direction: column;
1722
- position: relative;
1723
1643
  &[data-settings-node-selected] {
1724
1644
  outline: 1px solid var(--be-settings-node-selected-border-color) !important;
1725
1645
  outline-offset: 3px !important;
1726
1646
  border-radius: var(--sl-border-radius-small) !important;
1727
1647
  }
1728
1648
  }
1729
- .image-box-wrapper:first-child {
1649
+ .fill-in-the-blank-question-wrapper:first-child {
1730
1650
  margin-top: 0;
1731
1651
  }
1732
- .image-box-wrapper:last-child {
1652
+ .fill-in-the-blank-question-wrapper:last-child {
1733
1653
  margin-bottom: 0;
1734
1654
  }
1735
- .image-box-wrapper.centered {
1736
- align-items: center;
1737
- }
1738
- .image-box-wrapper.left-aligned {
1739
- align-items: start;
1740
- }
1741
- .image-box-wrapper.right-aligned {
1742
- align-items: end;
1743
- }
1744
- .image-box {
1655
+ .fill-in-the-blank-question-prompt {
1656
+ position: relative;
1745
1657
  display: flex;
1746
1658
  flex-direction: column;
1747
- justify-content: center;
1748
- gap: var(--sl-spacing-x-small);
1749
- position: relative;
1750
- border-radius: var(--sl-border-radius-small);
1751
- }
1752
- .image-box.selected {
1753
- outline: 1px dashed var(--sl-color-primary-400);
1754
- outline-offset: 3px;
1755
- pointer-events: none;
1756
- border-radius: var(--sl-border-radius-small);
1659
+ gap: var(--sl-spacing-2x-small);
1757
1660
  }
1758
- }
1759
-
1760
- /* src/styles/article-variable.css */
1761
- .be-article {
1762
- --variable-placeholder-width: 10px;
1763
- --variable-placeholder-height: 10px;
1764
- --variable-highlight-border-width: 3px;
1765
- strong.variable {
1766
- font-weight: var(--sl-font-weight-bold);
1661
+ .fill-in-the-blank-question-prompt-title {
1662
+ font-size: 10px;
1663
+ color: var(--sl-color-neutral-1000);
1664
+ line-height: 16px;
1665
+ text-transform: uppercase;
1767
1666
  }
1768
- em.variable,
1769
- .variable.text-italic {
1770
- font-style: italic;
1667
+ .fill-in-the-blank-question-prompt-content {
1668
+ position: relative;
1669
+ .nested-content {
1670
+ width: 100%;
1671
+ border-radius: 4px;
1672
+ padding: 8px;
1673
+ outline: 1px solid var(--sl-color-neutral-1000);
1674
+ background-color: var(--sl-color-neutral-50);
1675
+ }
1676
+ @media (max-width: 991px) {
1677
+ .nested-content {
1678
+ padding: 6px;
1679
+ }
1680
+ }
1681
+ p,
1682
+ h1,
1683
+ h2,
1684
+ h3 {
1685
+ color: inherit;
1686
+ margin-top: 0;
1687
+ margin-bottom: 0;
1688
+ line-height: var(--sl-line-height-normal);
1689
+ }
1771
1690
  }
1772
- .variable {
1773
- background-color: var(--sl-color-neutral-200);
1774
- color: var(--sl-color-neutral-700);
1691
+ span[data-block-editor-space] {
1692
+ border-width: 1px;
1693
+ border-style: solid;
1694
+ border-radius: var(--sl-border-radius-small);
1695
+ border-color: var(--sl-color-success-300);
1696
+ background-color: var(--sl-color-success-50);
1775
1697
  padding-left: calc(var(--sl-spacing-2x-small));
1776
1698
  padding-right: var(--sl-spacing-2x-small);
1777
- border-radius: var(--sl-border-radius-small);
1778
1699
  font-family: var(--sl-font-mono), monospace;
1779
1700
  font-style: normal;
1780
1701
  padding-block: var(--sl-spacing-3x-small);
1781
- border-top-left-radius: 3px;
1782
- border-bottom-left-radius: 3px;
1783
- border-left: var(--variable-highlight-border-width) solid var(--sl-color-neutral-1000);
1784
- font-weight: var(--sl-font-weight-normal);
1785
- &[data-variable-highlighted] {
1786
- background-color: #ebd9ff;
1787
- border-left: var(--variable-highlight-border-width) solid #7b00ff;
1702
+ font-weight: 300;
1703
+ }
1704
+ span[data-settings-node-selected] {
1705
+ border-color: #7b00ff;
1706
+ background-color: #ebd9ff;
1707
+ }
1708
+ }
1709
+
1710
+ /* src/styles/article-financial-statement-question.css */
1711
+ .be-article {
1712
+ .financial-statement-question-wrapper {
1713
+ position: relative;
1714
+ margin-top: var(--sl-spacing-large);
1715
+ margin-bottom: var(--sl-spacing-large);
1716
+ &[data-settings-node-selected] {
1717
+ outline: 1px solid var(--be-settings-node-selected-border-color) !important;
1718
+ outline-offset: 3px !important;
1719
+ border-radius: var(--sl-border-radius-small) !important;
1788
1720
  }
1789
1721
  }
1790
- .variable-text-bold {
1722
+ .financial-statement-question-wrapper:first-child {
1723
+ margin-top: 0;
1724
+ }
1725
+ .financial-statement-question-wrapper:last-child {
1726
+ margin-bottom: 0;
1727
+ }
1728
+ .financial-statement-question-prompt {
1729
+ position: relative;
1730
+ display: flex;
1731
+ flex-direction: column;
1732
+ gap: var(--sl-spacing-2x-small);
1733
+ }
1734
+ .financial-statement-question-prompt-title {
1735
+ font-size: var(--sl-font-size-medium);
1791
1736
  font-weight: var(--sl-font-weight-bold);
1737
+ color: var(--sl-color-neutral-600);
1792
1738
  }
1793
- .variable-text-italic {
1794
- font-style: italic;
1739
+ .financial-statement-question-header {
1740
+ position: relative;
1741
+ padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
1742
+ text-align: left;
1743
+ vertical-align: top;
1744
+ border-bottom: 1px solid var(--sl-color-neutral-200);
1745
+ border-right: 1px solid var(--sl-color-neutral-200);
1746
+ background-color: var(--sl-color-neutral-100);
1795
1747
  }
1796
- .variable-text-underline {
1797
- text-decoration: underline;
1798
- text-underline-offset: 2px;
1748
+ .financial-statement-question-cell {
1749
+ position: relative;
1750
+ padding-left: var(--sl-spacing-x-large);
1799
1751
  }
1800
- .variable-placeholder {
1752
+ .financial-statement-question-cell-id {
1801
1753
  position: absolute;
1802
- top: -3px;
1803
- left: -3px;
1804
- width: calc(var(--variable-placeholder-width) + 6px);
1805
- height: calc(var(--variable-placeholder-height) + 6px);
1806
- border-radius: var(--sl-border-radius-small);
1807
- border-top: 1px solid var(--sl-color-primary-400);
1808
- border-right: 1px solid var(--sl-color-primary-400);
1809
- border-bottom: 1px solid var(--sl-color-primary-400);
1810
- border-left: 1px solid var(--sl-color-primary-400);
1754
+ top: 3px;
1755
+ left: 3px;
1756
+ font-size: var(--sl-font-size-2x-small);
1757
+ color: var(--sl-color-neutral-400);
1811
1758
  }
1812
1759
  }
1813
1760
 
1814
- /* src/styles/article-callout-box.css */
1761
+ /* src/styles/article-image-box.css */
1815
1762
  .be-article {
1816
- .callout-box-wrapper {
1817
- position: relative;
1763
+ .image-box-wrapper {
1818
1764
  margin-top: var(--sl-spacing-large);
1819
1765
  margin-bottom: var(--sl-spacing-large);
1766
+ display: flex;
1767
+ flex-direction: column;
1768
+ position: relative;
1820
1769
  &[data-settings-node-selected] {
1821
1770
  outline: 1px solid var(--be-settings-node-selected-border-color) !important;
1822
1771
  outline-offset: 3px !important;
1823
1772
  border-radius: var(--sl-border-radius-small) !important;
1824
1773
  }
1825
1774
  }
1826
- .callout-box-wrapper:first-child {
1775
+ .image-box-wrapper:first-child {
1827
1776
  margin-top: 0;
1828
1777
  }
1829
- .callout-box-wrapper:last-child {
1778
+ .image-box-wrapper:last-child {
1830
1779
  margin-bottom: 0;
1831
1780
  }
1832
- .callout-box {
1833
- position: relative;
1834
- display: flex;
1835
- flex-direction: row;
1781
+ .image-box-wrapper.centered {
1782
+ align-items: center;
1783
+ }
1784
+ .image-box-wrapper.left-aligned {
1836
1785
  align-items: start;
1837
- gap: var(--sl-spacing-small);
1838
- width: 100%;
1839
- border-radius: var(--sl-border-radius-small);
1840
- padding: var(--sl-spacing-small);
1841
1786
  }
1842
- .callout-box-icon {
1843
- padding-top: calc(var(--sl-spacing-2x-small) + 2px);
1844
- padding-left: var(--sl-spacing-2x-small);
1845
- padding-right: var(--sl-spacing-2x-small);
1846
- line-height: var(--sl-line-height-dense);
1787
+ .image-box-wrapper.right-aligned {
1788
+ align-items: end;
1789
+ }
1790
+ .image-box {
1847
1791
  display: flex;
1848
- align-items: center;
1792
+ flex-direction: column;
1849
1793
  justify-content: center;
1850
- sl-icon {
1851
- width: 1em;
1852
- height: 1em;
1853
- }
1854
- }
1855
- .callout-box-content {
1794
+ gap: var(--sl-spacing-x-small);
1856
1795
  position: relative;
1857
- padding-block: var(--sl-spacing-2x-small);
1858
- flex-grow: 1;
1859
- --sl-font-size-base: 0.9rem;
1860
- --sl-font-size-2x-small: calc(var(--sl-font-size-base) * 0.625);
1861
- --sl-font-size-x-small: calc(var(--sl-font-size-base) * 0.75);
1862
- --sl-font-size-small: calc(var(--sl-font-size-base) * 0.875);
1863
- --sl-font-size-medium: var(--sl-font-size-base);
1864
- --sl-font-size-large: calc(var(--sl-font-size-base) * 1.25);
1865
- --sl-font-size-x-large: calc(var(--sl-font-size-base) * 1.5);
1866
- --sl-font-size-2x-large: calc(var(--sl-font-size-base) * 2.25);
1867
- --sl-font-size-3x-large: calc(var(--sl-font-size-base) * 3);
1868
- --sl-font-size-4x-large: calc(var(--sl-font-size-base) * 4.5);
1869
- p,
1870
- h1,
1871
- h2,
1872
- h3 {
1873
- color: inherit;
1874
- margin-top: 0;
1875
- margin-bottom: 0;
1876
- line-height: var(--sl-line-height-normal);
1877
- }
1796
+ border-radius: var(--sl-border-radius-small);
1797
+ }
1798
+ .image-box.selected {
1799
+ outline: 1px dashed var(--sl-color-primary-400);
1800
+ outline-offset: 3px;
1801
+ pointer-events: none;
1802
+ border-radius: var(--sl-border-radius-small);
1878
1803
  }
1879
1804
  }
1880
1805
 
1881
- /* src/styles/article-multiple-option-question.css */
1806
+ /* src/styles/article-journal-entry-question.css */
1882
1807
  .be-article {
1883
- .multiple-option-question-wrapper {
1808
+ .journal-entry-question-wrapper {
1884
1809
  position: relative;
1885
1810
  margin-top: var(--sl-spacing-large);
1886
1811
  margin-bottom: var(--sl-spacing-large);
@@ -1890,73 +1815,81 @@ sl-progress-bar {
1890
1815
  border-radius: var(--sl-border-radius-small) !important;
1891
1816
  }
1892
1817
  }
1893
- .multiple-option-question-wrapper:first-child {
1818
+ .journal-entry-question-wrapper:first-child {
1894
1819
  margin-top: 0;
1895
1820
  }
1896
- .multiple-option-question-wrapper:last-child {
1821
+ .journal-entry-question-wrapper:last-child {
1897
1822
  margin-bottom: 0;
1898
1823
  }
1899
- .multiple-option-question-prompt {
1824
+ .journal-entry-question-prompt {
1900
1825
  position: relative;
1901
1826
  display: flex;
1902
1827
  flex-direction: column;
1903
- gap: 6px;
1828
+ gap: var(--sl-spacing-2x-small);
1904
1829
  }
1905
- .multiple-option-question-prompt-title {
1830
+ .journal-entry-question-prompt-title {
1906
1831
  font-size: 10px;
1907
1832
  color: var(--sl-color-neutral-1000);
1908
1833
  line-height: 16px;
1909
1834
  text-transform: uppercase;
1910
1835
  }
1911
- .multiple-option-question-prompt-options {
1912
- flex-grow: 1;
1913
- display: flex;
1914
- flex-direction: column;
1915
- gap: 6px;
1836
+ .journal-entry-question-prompt-items {
1837
+ display: grid;
1838
+ grid-template-columns: auto 1fr 160px 160px;
1839
+ column-gap: 6px;
1840
+ row-gap: 6px;
1841
+ width: 100%;
1916
1842
  }
1917
- .multiple-option-question-prompt-option-item {
1918
- position: relative;
1843
+ .journal-entry-question-prompt-question-item-controls {
1919
1844
  display: flex;
1845
+ align-self: start;
1920
1846
  flex-direction: row;
1921
- align-items: start;
1922
- gap: 6px;
1923
- .none-of-the-above-item {
1924
- width: 100%;
1847
+ align-items: center;
1848
+ gap: 8px;
1849
+ justify-content: start;
1850
+ padding-block: 8px;
1851
+ .sl-icon {
1852
+ width: 20px;
1853
+ height: 20px;
1854
+ }
1855
+ sl-button[size=small].button_icon::part(base),
1856
+ sl-button[size=medium].button_icon::part(base),
1857
+ sl-button[size=large].button_icon::part(base) {
1858
+ padding-inline: 0;
1859
+ padding: 2px;
1860
+ }
1861
+ sl-button.button_icon::part(base) {
1862
+ border: 0;
1863
+ min-height: auto;
1864
+ align-items: center;
1865
+ }
1866
+ sl-button.neutral::part(base) {
1867
+ color: var(--sl-color-neutral-700);
1868
+ }
1869
+ sl-button.success::part(base) {
1870
+ color: var(--sl-color-success-500);
1871
+ }
1872
+ sl-button.danger::part(base) {
1873
+ color: var(--sl-color-danger-500);
1874
+ }
1875
+ sl-checkbox::part(control) {
1925
1876
  border-radius: 4px;
1926
- padding: 8px;
1927
- outline: 1px solid var(--sl-color-neutral-1000);
1928
1877
  }
1929
- .controls {
1930
- display: flex;
1931
- flex-direction: row;
1878
+ sl-checkbox::part(label) {
1879
+ color: var(--sl-color-neutral-1000);
1880
+ text-wrap: nowrap;
1881
+ }
1882
+ sl-checkbox::part(base) {
1932
1883
  align-items: center;
1933
- gap: 6px;
1934
- padding-block: 8px;
1935
- .sl-icon {
1936
- width: 20px;
1937
- height: 20px;
1938
- }
1939
- sl-button[size=small].button_icon::part(base),
1940
- sl-button[size=medium].button_icon::part(base),
1941
- sl-button[size=large].button_icon::part(base) {
1942
- padding-inline: 0;
1943
- padding: 2px;
1944
- }
1945
- sl-button.button_icon::part(base) {
1946
- border: 0;
1947
- min-height: auto;
1948
- align-items: center;
1949
- }
1950
- sl-button.neutral::part(base) {
1951
- color: var(--sl-color-neutral-700);
1952
- }
1953
- sl-button.success::part(base) {
1954
- color: var(--sl-color-success-500);
1955
- }
1956
- sl-button.danger::part(base) {
1957
- color: var(--sl-color-danger-500);
1958
- }
1959
1884
  }
1885
+ }
1886
+ @media (max-width: 991px) {
1887
+ .journal-entry-question-prompt-question-item-controls {
1888
+ gap: 0;
1889
+ padding-block: 6px;
1890
+ }
1891
+ }
1892
+ .journal-entry-question-prompt-question-item {
1960
1893
  .nested-content {
1961
1894
  width: 100%;
1962
1895
  border-radius: 4px;
@@ -1964,17 +1897,13 @@ sl-progress-bar {
1964
1897
  padding-inline: 8px;
1965
1898
  outline: 1px solid var(--sl-color-neutral-1000);
1966
1899
  }
1900
+ .nested-content:focus {
1901
+ outline: 1px solid #7b00ff;
1902
+ }
1967
1903
  @media (max-width: 991px) {
1968
1904
  .nested-content {
1969
1905
  padding-block: 6px;
1970
1906
  }
1971
- .controls {
1972
- gap: 0;
1973
- padding-block: 6px;
1974
- }
1975
- }
1976
- .nested-content:focus {
1977
- outline: 1px solid #7b00ff;
1978
1907
  }
1979
1908
  p,
1980
1909
  h1,
@@ -1985,94 +1914,27 @@ sl-progress-bar {
1985
1914
  margin-bottom: 0;
1986
1915
  line-height: var(--sl-line-height-normal);
1987
1916
  }
1988
- }
1989
- .multiple-option-question-prompt-footer {
1990
- display: flex;
1991
- flex-direction: row;
1992
- justify-items: center;
1993
- justify-content: end;
1994
- sl-button::part(base) {
1995
- padding-inline-start: 4px;
1996
- padding-inline: 4px;
1997
- padding-block: 4px;
1998
- padding: 4px 4px;
1999
- min-height: auto;
2000
- align-items: center;
2001
- line-height: 1;
2002
- }
2003
- sl-button::part(label) {
2004
- padding-right: 0;
2005
- padding-left: 8px;
2006
- letter-spacing: 1.25px;
1917
+ &.incorrect p {
1918
+ margin-bottom: var(--sl-spacing-x-small);
2007
1919
  }
2008
1920
  }
2009
- }
2010
-
2011
- /* src/styles/article-short-answer-question.css */
2012
- .be-article {
2013
- .short-answer-question-wrapper {
2014
- position: relative;
2015
- margin-top: var(--sl-spacing-large);
2016
- margin-bottom: var(--sl-spacing-large);
2017
- &[data-settings-node-selected] {
2018
- outline: 1px solid var(--be-settings-node-selected-border-color) !important;
2019
- outline-offset: 3px !important;
2020
- border-radius: var(--sl-border-radius-small) !important;
1921
+ .journal-entry-question-prompt-question-item.numbers {
1922
+ .nested-content {
1923
+ text-align: end;
2021
1924
  }
2022
1925
  }
2023
- .short-answer-question-wrapper:first-child {
2024
- margin-top: 0;
2025
- }
2026
- .short-answer-question-wrapper:last-child {
2027
- margin-bottom: 0;
2028
- }
2029
- .short-answer-question-prompt {
2030
- position: relative;
2031
- display: flex;
2032
- flex-direction: column;
2033
- gap: var(--sl-spacing-2x-small);
2034
- }
2035
- .short-answer-question-prompt-title {
2036
- font-size: 10px;
2037
- color: var(--sl-color-neutral-1000);
2038
- line-height: 16px;
2039
- text-transform: uppercase;
2040
- }
2041
- .short-answer-question-prompt-content {
2042
- position: relative;
2043
- display: flex;
2044
- flex-direction: column;
2045
- gap: var(--sl-spacing-2x-small);
2046
- padding-top: var(--sl-spacing-2x-small);
2047
- padding-left: var(--sl-spacing-small);
2048
- padding-right: var(--sl-spacing-small);
2049
- padding-bottom: var(--sl-spacing-small);
2050
- border: 1px solid var(--sl-color-neutral-300);
2051
- border-radius: var(--sl-border-radius-medium);
2052
- border-color: var(--sl-color-neutral-1000);
2053
- p,
2054
- h1,
2055
- h2,
2056
- h3 {
2057
- color: inherit;
2058
- margin-top: 0;
2059
- margin-bottom: 0;
2060
- line-height: var(--sl-line-height-normal);
2061
- }
2062
- .nested-content {
2063
- min-height: 7em;
1926
+ .journal-entry-question-prompt-question-item.disabled {
1927
+ .nested-content,
1928
+ .nested-content:focus {
1929
+ outline-color: var(--sl-color-neutral-300);
1930
+ color: var(--sl-color-neutral-300);
2064
1931
  }
2065
1932
  }
2066
- .short-answer-question-prompt-footer {
1933
+ .journal-entry-question-prompt-footer {
2067
1934
  display: flex;
2068
1935
  flex-direction: row;
2069
- justify-content: start;
2070
- align-items: center;
2071
- font-size: var(--sl-font-size-small);
2072
- font-weight: var(--sl-font-weight-normal);
2073
- color: var(--sl-color-neutral-600);
2074
- text-transform: uppercase;
2075
- padding-inline: var(--sl-spacing-small);
1936
+ justify-items: center;
1937
+ justify-content: end;
2076
1938
  sl-button::part(base) {
2077
1939
  padding-inline-start: 4px;
2078
1940
  padding-inline: 4px;
@@ -2214,51 +2076,104 @@ sl-progress-bar {
2214
2076
  }
2215
2077
  }
2216
2078
 
2217
- /* src/styles/article-fill-in-the-blank-question.css */
2079
+ /* src/styles/article-multiple-option-question.css */
2218
2080
  .be-article {
2219
- --space-highlight-border-width: 3px;
2220
- .fill-in-the-blank-question-wrapper {
2081
+ .multiple-option-question-wrapper {
2221
2082
  position: relative;
2222
2083
  margin-top: var(--sl-spacing-large);
2223
2084
  margin-bottom: var(--sl-spacing-large);
2224
- &[data-settings-node-selected] {
2085
+ &[data-settings-node-selected]:not(:focus-within) {
2225
2086
  outline: 1px solid var(--be-settings-node-selected-border-color) !important;
2226
2087
  outline-offset: 3px !important;
2227
2088
  border-radius: var(--sl-border-radius-small) !important;
2228
2089
  }
2229
2090
  }
2230
- .fill-in-the-blank-question-wrapper:first-child {
2091
+ .multiple-option-question-wrapper:first-child {
2231
2092
  margin-top: 0;
2232
2093
  }
2233
- .fill-in-the-blank-question-wrapper:last-child {
2094
+ .multiple-option-question-wrapper:last-child {
2234
2095
  margin-bottom: 0;
2235
2096
  }
2236
- .fill-in-the-blank-question-prompt {
2097
+ .multiple-option-question-prompt {
2237
2098
  position: relative;
2238
2099
  display: flex;
2239
2100
  flex-direction: column;
2240
- gap: var(--sl-spacing-2x-small);
2101
+ gap: 6px;
2241
2102
  }
2242
- .fill-in-the-blank-question-prompt-title {
2103
+ .multiple-option-question-prompt-title {
2243
2104
  font-size: 10px;
2244
2105
  color: var(--sl-color-neutral-1000);
2245
2106
  line-height: 16px;
2246
2107
  text-transform: uppercase;
2247
2108
  }
2248
- .fill-in-the-blank-question-prompt-content {
2109
+ .multiple-option-question-prompt-options {
2110
+ flex-grow: 1;
2111
+ display: flex;
2112
+ flex-direction: column;
2113
+ gap: 6px;
2114
+ }
2115
+ .multiple-option-question-prompt-option-item {
2249
2116
  position: relative;
2250
- .nested-content {
2117
+ display: flex;
2118
+ flex-direction: row;
2119
+ align-items: start;
2120
+ gap: 6px;
2121
+ .none-of-the-above-item {
2251
2122
  width: 100%;
2252
2123
  border-radius: 4px;
2253
2124
  padding: 8px;
2254
2125
  outline: 1px solid var(--sl-color-neutral-1000);
2255
- background-color: var(--sl-color-neutral-50);
2126
+ }
2127
+ .controls {
2128
+ display: flex;
2129
+ flex-direction: row;
2130
+ align-items: center;
2131
+ gap: 6px;
2132
+ padding-block: 8px;
2133
+ .sl-icon {
2134
+ width: 20px;
2135
+ height: 20px;
2136
+ }
2137
+ sl-button[size=small].button_icon::part(base),
2138
+ sl-button[size=medium].button_icon::part(base),
2139
+ sl-button[size=large].button_icon::part(base) {
2140
+ padding-inline: 0;
2141
+ padding: 2px;
2142
+ }
2143
+ sl-button.button_icon::part(base) {
2144
+ border: 0;
2145
+ min-height: auto;
2146
+ align-items: center;
2147
+ }
2148
+ sl-button.neutral::part(base) {
2149
+ color: var(--sl-color-neutral-700);
2150
+ }
2151
+ sl-button.success::part(base) {
2152
+ color: var(--sl-color-success-500);
2153
+ }
2154
+ sl-button.danger::part(base) {
2155
+ color: var(--sl-color-danger-500);
2156
+ }
2157
+ }
2158
+ .nested-content {
2159
+ width: 100%;
2160
+ border-radius: 4px;
2161
+ padding-block: 8px;
2162
+ padding-inline: 8px;
2163
+ outline: 1px solid var(--sl-color-neutral-1000);
2256
2164
  }
2257
2165
  @media (max-width: 991px) {
2258
2166
  .nested-content {
2259
- padding: 6px;
2167
+ padding-block: 6px;
2168
+ }
2169
+ .controls {
2170
+ gap: 0;
2171
+ padding-block: 6px;
2260
2172
  }
2261
2173
  }
2174
+ .nested-content:focus {
2175
+ outline: 1px solid #7b00ff;
2176
+ }
2262
2177
  p,
2263
2178
  h1,
2264
2179
  h2,
@@ -2269,157 +2184,93 @@ sl-progress-bar {
2269
2184
  line-height: var(--sl-line-height-normal);
2270
2185
  }
2271
2186
  }
2272
- span[data-block-editor-space] {
2273
- border-width: 1px;
2274
- border-style: solid;
2275
- border-radius: var(--sl-border-radius-small);
2276
- border-color: var(--sl-color-success-300);
2277
- background-color: var(--sl-color-success-50);
2278
- padding-left: calc(var(--sl-spacing-2x-small));
2279
- padding-right: var(--sl-spacing-2x-small);
2280
- font-family: var(--sl-font-mono), monospace;
2281
- font-style: normal;
2282
- padding-block: var(--sl-spacing-3x-small);
2283
- font-weight: 300;
2284
- }
2285
- span[data-settings-node-selected] {
2286
- border-color: #7b00ff;
2287
- background-color: #ebd9ff;
2187
+ .multiple-option-question-prompt-footer {
2188
+ display: flex;
2189
+ flex-direction: row;
2190
+ justify-items: center;
2191
+ justify-content: end;
2192
+ sl-button::part(base) {
2193
+ padding-inline-start: 4px;
2194
+ padding-inline: 4px;
2195
+ padding-block: 4px;
2196
+ padding: 4px 4px;
2197
+ min-height: auto;
2198
+ align-items: center;
2199
+ line-height: 1;
2200
+ }
2201
+ sl-button::part(label) {
2202
+ padding-right: 0;
2203
+ padding-left: 8px;
2204
+ letter-spacing: 1.25px;
2205
+ }
2288
2206
  }
2289
2207
  }
2290
2208
 
2291
- /* src/styles/article-journal-entry-question.css */
2209
+ /* src/styles/article-short-answer-question.css */
2292
2210
  .be-article {
2293
- .journal-entry-question-wrapper {
2211
+ .short-answer-question-wrapper {
2294
2212
  position: relative;
2295
2213
  margin-top: var(--sl-spacing-large);
2296
2214
  margin-bottom: var(--sl-spacing-large);
2297
- &[data-settings-node-selected]:not(:focus-within) {
2215
+ &[data-settings-node-selected] {
2298
2216
  outline: 1px solid var(--be-settings-node-selected-border-color) !important;
2299
2217
  outline-offset: 3px !important;
2300
2218
  border-radius: var(--sl-border-radius-small) !important;
2301
2219
  }
2302
2220
  }
2303
- .journal-entry-question-wrapper:first-child {
2221
+ .short-answer-question-wrapper:first-child {
2304
2222
  margin-top: 0;
2305
2223
  }
2306
- .journal-entry-question-wrapper:last-child {
2224
+ .short-answer-question-wrapper:last-child {
2307
2225
  margin-bottom: 0;
2308
2226
  }
2309
- .journal-entry-question-prompt {
2227
+ .short-answer-question-prompt {
2310
2228
  position: relative;
2311
2229
  display: flex;
2312
2230
  flex-direction: column;
2313
2231
  gap: var(--sl-spacing-2x-small);
2314
2232
  }
2315
- .journal-entry-question-prompt-title {
2233
+ .short-answer-question-prompt-title {
2316
2234
  font-size: 10px;
2317
2235
  color: var(--sl-color-neutral-1000);
2318
2236
  line-height: 16px;
2319
2237
  text-transform: uppercase;
2320
2238
  }
2321
- .journal-entry-question-prompt-items {
2322
- display: grid;
2323
- grid-template-columns: auto 1fr 160px 160px;
2324
- column-gap: 6px;
2325
- row-gap: 6px;
2326
- width: 100%;
2239
+ .short-answer-question-prompt-content {
2240
+ position: relative;
2241
+ display: flex;
2242
+ flex-direction: column;
2243
+ gap: var(--sl-spacing-2x-small);
2244
+ padding-top: var(--sl-spacing-2x-small);
2245
+ padding-left: var(--sl-spacing-small);
2246
+ padding-right: var(--sl-spacing-small);
2247
+ padding-bottom: var(--sl-spacing-small);
2248
+ border: 1px solid var(--sl-color-neutral-300);
2249
+ border-radius: var(--sl-border-radius-medium);
2250
+ border-color: var(--sl-color-neutral-1000);
2251
+ p,
2252
+ h1,
2253
+ h2,
2254
+ h3 {
2255
+ color: inherit;
2256
+ margin-top: 0;
2257
+ margin-bottom: 0;
2258
+ line-height: var(--sl-line-height-normal);
2259
+ }
2260
+ .nested-content {
2261
+ min-height: 7em;
2262
+ }
2327
2263
  }
2328
- .journal-entry-question-prompt-question-item-controls {
2264
+ .short-answer-question-prompt-footer {
2329
2265
  display: flex;
2330
- align-self: start;
2331
2266
  flex-direction: row;
2267
+ justify-content: start;
2332
2268
  align-items: center;
2333
- gap: 8px;
2334
- justify-content: start;
2335
- padding-block: 8px;
2336
- .sl-icon {
2337
- width: 20px;
2338
- height: 20px;
2339
- }
2340
- sl-button[size=small].button_icon::part(base),
2341
- sl-button[size=medium].button_icon::part(base),
2342
- sl-button[size=large].button_icon::part(base) {
2343
- padding-inline: 0;
2344
- padding: 2px;
2345
- }
2346
- sl-button.button_icon::part(base) {
2347
- border: 0;
2348
- min-height: auto;
2349
- align-items: center;
2350
- }
2351
- sl-button.neutral::part(base) {
2352
- color: var(--sl-color-neutral-700);
2353
- }
2354
- sl-button.success::part(base) {
2355
- color: var(--sl-color-success-500);
2356
- }
2357
- sl-button.danger::part(base) {
2358
- color: var(--sl-color-danger-500);
2359
- }
2360
- sl-checkbox::part(control) {
2361
- border-radius: 4px;
2362
- }
2363
- sl-checkbox::part(label) {
2364
- color: var(--sl-color-neutral-1000);
2365
- text-wrap: nowrap;
2366
- }
2367
- sl-checkbox::part(base) {
2368
- align-items: center;
2369
- }
2370
- }
2371
- @media (max-width: 991px) {
2372
- .journal-entry-question-prompt-question-item-controls {
2373
- gap: 0;
2374
- padding-block: 6px;
2375
- }
2376
- }
2377
- .journal-entry-question-prompt-question-item {
2378
- .nested-content {
2379
- width: 100%;
2380
- border-radius: 4px;
2381
- padding-block: 8px;
2382
- padding-inline: 8px;
2383
- outline: 1px solid var(--sl-color-neutral-1000);
2384
- }
2385
- .nested-content:focus {
2386
- outline: 1px solid #7b00ff;
2387
- }
2388
- @media (max-width: 991px) {
2389
- .nested-content {
2390
- padding-block: 6px;
2391
- }
2392
- }
2393
- p,
2394
- h1,
2395
- h2,
2396
- h3 {
2397
- color: inherit;
2398
- margin-top: 0;
2399
- margin-bottom: 0;
2400
- line-height: var(--sl-line-height-normal);
2401
- }
2402
- &.incorrect p {
2403
- margin-bottom: var(--sl-spacing-x-small);
2404
- }
2405
- }
2406
- .journal-entry-question-prompt-question-item.numbers {
2407
- .nested-content {
2408
- text-align: end;
2409
- }
2410
- }
2411
- .journal-entry-question-prompt-question-item.disabled {
2412
- .nested-content,
2413
- .nested-content:focus {
2414
- outline-color: var(--sl-color-neutral-300);
2415
- color: var(--sl-color-neutral-300);
2416
- }
2417
- }
2418
- .journal-entry-question-prompt-footer {
2419
- display: flex;
2420
- flex-direction: row;
2421
- justify-items: center;
2422
- justify-content: end;
2269
+ font-size: var(--sl-font-size-small);
2270
+ font-weight: var(--sl-font-weight-normal);
2271
+ color: var(--sl-color-neutral-600);
2272
+ text-transform: uppercase;
2273
+ padding-inline: var(--sl-spacing-small);
2423
2274
  sl-button::part(base) {
2424
2275
  padding-inline-start: 4px;
2425
2276
  padding-inline: 4px;
@@ -2437,60 +2288,9 @@ sl-progress-bar {
2437
2288
  }
2438
2289
  }
2439
2290
 
2440
- /* src/styles/article-financial-statement-question.css */
2441
- .be-article {
2442
- .financial-statement-question-wrapper {
2443
- position: relative;
2444
- margin-top: var(--sl-spacing-large);
2445
- margin-bottom: var(--sl-spacing-large);
2446
- &[data-settings-node-selected] {
2447
- outline: 1px solid var(--be-settings-node-selected-border-color) !important;
2448
- outline-offset: 3px !important;
2449
- border-radius: var(--sl-border-radius-small) !important;
2450
- }
2451
- }
2452
- .financial-statement-question-wrapper:first-child {
2453
- margin-top: 0;
2454
- }
2455
- .financial-statement-question-wrapper:last-child {
2456
- margin-bottom: 0;
2457
- }
2458
- .financial-statement-question-prompt {
2459
- position: relative;
2460
- display: flex;
2461
- flex-direction: column;
2462
- gap: var(--sl-spacing-2x-small);
2463
- }
2464
- .financial-statement-question-prompt-title {
2465
- font-size: var(--sl-font-size-medium);
2466
- font-weight: var(--sl-font-weight-bold);
2467
- color: var(--sl-color-neutral-600);
2468
- }
2469
- .financial-statement-question-header {
2470
- position: relative;
2471
- padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
2472
- text-align: left;
2473
- vertical-align: top;
2474
- border-bottom: 1px solid var(--sl-color-neutral-200);
2475
- border-right: 1px solid var(--sl-color-neutral-200);
2476
- background-color: var(--sl-color-neutral-100);
2477
- }
2478
- .financial-statement-question-cell {
2479
- position: relative;
2480
- padding-left: var(--sl-spacing-x-large);
2481
- }
2482
- .financial-statement-question-cell-id {
2483
- position: absolute;
2484
- top: 3px;
2485
- left: 3px;
2486
- font-size: var(--sl-font-size-2x-small);
2487
- color: var(--sl-color-neutral-400);
2488
- }
2489
- }
2490
-
2491
- /* src/styles/article-essay-question.css */
2291
+ /* src/styles/article-simulation-question.css */
2492
2292
  .be-article {
2493
- .essay-question-wrapper {
2293
+ .simulation-question-wrapper {
2494
2294
  position: relative;
2495
2295
  margin-top: var(--sl-spacing-large);
2496
2296
  margin-bottom: var(--sl-spacing-large);
@@ -2500,24 +2300,24 @@ sl-progress-bar {
2500
2300
  border-radius: var(--sl-border-radius-small) !important;
2501
2301
  }
2502
2302
  }
2503
- .essay-question-wrapper:first-child {
2303
+ .simulation-question-wrapper:first-child {
2504
2304
  margin-top: 0;
2505
2305
  }
2506
- .essay-question-wrapper:last-child {
2306
+ .simulation-question-wrapper:last-child {
2507
2307
  margin-bottom: 0;
2508
2308
  }
2509
- .essay-question-prompt {
2309
+ .simulation-question-prompt {
2510
2310
  position: relative;
2511
2311
  display: flex;
2512
2312
  flex-direction: column;
2513
2313
  gap: var(--sl-spacing-2x-small);
2514
2314
  }
2515
- .essay-question-prompt-title {
2315
+ .simulation-question-prompt-title {
2516
2316
  font-size: var(--sl-font-size-medium);
2517
2317
  font-weight: var(--sl-font-weight-bold);
2518
2318
  color: var(--sl-color-neutral-600);
2519
2319
  }
2520
- .essay-question-prompt-content {
2320
+ .simulation-question-prompt-content {
2521
2321
  position: relative;
2522
2322
  display: flex;
2523
2323
  flex-direction: column;
@@ -2550,110 +2350,395 @@ sl-progress-bar {
2550
2350
  }
2551
2351
  }
2552
2352
 
2553
- /* src/styles/article-simulation-question.css */
2353
+ /* src/styles/article-table-box.css */
2554
2354
  .be-article {
2555
- .simulation-question-wrapper {
2355
+ .table-box-wrapper {
2556
2356
  position: relative;
2357
+ width: 100%;
2557
2358
  margin-top: var(--sl-spacing-large);
2558
2359
  margin-bottom: var(--sl-spacing-large);
2559
- &[data-settings-node-selected] {
2560
- outline: 1px solid var(--be-settings-node-selected-border-color) !important;
2561
- outline-offset: 3px !important;
2562
- border-radius: var(--sl-border-radius-small) !important;
2563
- }
2360
+ overflow-y: hidden;
2361
+ overflow-x: auto;
2564
2362
  }
2565
- .simulation-question-wrapper:first-child {
2363
+ .table-box-wrapper:first-child {
2566
2364
  margin-top: 0;
2567
2365
  }
2568
- .simulation-question-wrapper:last-child {
2366
+ .table-box-wrapper:last-child {
2569
2367
  margin-bottom: 0;
2570
2368
  }
2571
- .simulation-question-prompt {
2369
+ .table-box {
2572
2370
  position: relative;
2573
- display: flex;
2574
- flex-direction: column;
2575
- gap: var(--sl-spacing-2x-small);
2371
+ width: 100%;
2372
+ overflow-y: hidden;
2373
+ overflow-x: auto;
2576
2374
  }
2577
- .simulation-question-prompt-title {
2578
- font-size: var(--sl-font-size-medium);
2579
- font-weight: var(--sl-font-weight-bold);
2580
- color: var(--sl-color-neutral-600);
2375
+ table {
2376
+ position: relative;
2377
+ width: fit-content;
2378
+ table-layout: fixed;
2379
+ border-radius: var(--sl-border-radius-small);
2380
+ border-collapse: collapse;
2381
+ border-spacing: 0;
2382
+ overflow: hidden;
2581
2383
  }
2582
- .simulation-question-prompt-content {
2384
+ th,
2385
+ td {
2583
2386
  position: relative;
2584
- display: flex;
2585
- flex-direction: column;
2586
- gap: var(--sl-spacing-2x-small);
2587
- padding-top: var(--sl-spacing-2x-small);
2588
- padding-left: var(--sl-spacing-small);
2589
- padding-right: var(--sl-spacing-small);
2590
- padding-bottom: var(--sl-spacing-small);
2591
- border: 1px solid var(--sl-color-neutral-300);
2592
- border-radius: var(--sl-border-radius-medium);
2593
- border-color: var(--sl-color-neutral-300);
2594
- background-color: var(--sl-color-neutral-50);
2595
- .title {
2596
- color: var(--sl-color-neutral-500);
2597
- display: flex;
2598
- flex-direction: row;
2599
- align-items: center;
2600
- gap: var(--sl-spacing-x-small);
2601
- font-size: var(--sl-font-size-x-small);
2602
- }
2387
+ padding: var(--sl-spacing-3x-small) var(--sl-spacing-2x-small);
2388
+ text-align: left;
2389
+ vertical-align: top;
2390
+ border: 1px solid var(--sl-color-neutral-200);
2391
+ }
2392
+ th,
2393
+ td {
2603
2394
  p,
2604
2395
  h1,
2605
2396
  h2,
2606
2397
  h3 {
2607
- color: inherit;
2608
2398
  margin-top: 0;
2609
2399
  margin-bottom: 0;
2610
- line-height: var(--sl-line-height-normal);
2611
2400
  }
2612
2401
  }
2613
- }
2614
-
2615
- /* src/styles/article-custom-question.css */
2616
- .be-article {
2617
- .custom-question-wrapper {
2618
- position: relative;
2619
- margin-top: var(--sl-spacing-large);
2620
- margin-bottom: var(--sl-spacing-large);
2621
- &[data-settings-node-selected] {
2622
- outline: 1px solid var(--be-settings-node-selected-border-color) !important;
2623
- outline-offset: 3px !important;
2624
- border-radius: var(--sl-border-radius-small) !important;
2402
+ [data-lexical-row-striping=true],
2403
+ [data-lexical-row-striping=true] > table,
2404
+ [data-lexical-row-striping=true] > table > tbody {
2405
+ & > tr:nth-child(odd) td {
2406
+ background-color: var(--sl-color-neutral-0);
2407
+ }
2408
+ & > tr:nth-child(even) td {
2409
+ background-color: var(--sl-color-neutral-50);
2625
2410
  }
2626
2411
  }
2627
- .custom-question-wrapper:first-child {
2628
- margin-top: 0;
2412
+ th {
2413
+ background-color: var(--sl-color-neutral-100);
2414
+ * {
2415
+ font-weight: var(--sl-font-weight-bold);
2416
+ }
2629
2417
  }
2630
- .custom-question-wrapper:last-child {
2631
- margin-bottom: 0;
2418
+ th[data-editor-table-column-key]::before {
2419
+ content: " ";
2420
+ position: absolute;
2421
+ top: 0;
2422
+ right: -10px;
2423
+ width: 20px;
2424
+ bottom: 0;
2425
+ z-index: 10;
2632
2426
  }
2633
- .custom-question-prompt {
2427
+ td {
2428
+ background-color: var(--sl-color-neutral-0);
2429
+ }
2430
+ .table-selected {
2431
+ outline: 2px solid rgb(60, 132, 244);
2432
+ }
2433
+ .table-selection *::selection {
2434
+ background-color: transparent;
2435
+ }
2436
+ .table-cell-selected {
2437
+ caret-color: transparent;
2438
+ }
2439
+ .table-cell-selected::after {
2440
+ position: absolute;
2441
+ left: 0;
2442
+ right: 0;
2443
+ bottom: 0;
2444
+ top: 0;
2445
+ background-color: var(--be-bg-color-table-selection);
2446
+ mix-blend-mode: normal;
2447
+ content: "";
2448
+ pointer-events: none;
2449
+ }
2450
+ }
2451
+
2452
+ /* src/styles/article-typography.css */
2453
+ .be-article {
2454
+ --be-ol-list-style-type: decimal;
2455
+ kbd {
2456
+ background-color: var(--sl-color-neutral-100);
2457
+ color: var(--sl-color-neutral-700);
2458
+ padding-inline: var(--sl-spacing-2x-small);
2459
+ border-radius: var(--sl-border-radius-small);
2460
+ font-family: var(--sl-font-mono), monospace;
2461
+ font-style: normal;
2462
+ padding-block: var(--sl-spacing-2x-small);
2463
+ font-weight: 600;
2464
+ }
2465
+ p {
2634
2466
  position: relative;
2635
- display: flex;
2636
- flex-direction: column;
2637
- gap: 6px;
2467
+ text-wrap: wrap;
2468
+ font-weight: normal;
2469
+ font-size: var(--sl-font-size-medium);
2470
+ letter-spacing: var(--sl-letter-spacing-normal);
2471
+ margin-top: var(--sl-spacing-large);
2472
+ margin-bottom: var(--sl-spacing-large);
2473
+ line-height: var(--sl-line-height-normal);
2474
+ color: var(--sl-color-neutral-900);
2638
2475
  }
2639
- .custom-question-prompt-title {
2640
- font-size: 10px;
2641
- color: var(--sl-color-neutral-1000);
2642
- line-height: 16px;
2643
- text-transform: uppercase;
2476
+ p {
2477
+ > code span {
2478
+ background-color: var(--sl-color-neutral-100);
2479
+ padding-inline: var(--sl-spacing-2x-small);
2480
+ border-radius: var(--sl-border-radius-small);
2481
+ border-color: var(--sl-color-neutral-200);
2482
+ border-style: solid;
2483
+ border-width: 1px;
2484
+ font-family: var(--sl-font-mono), monospace;
2485
+ font-style: normal;
2486
+ font-size: inherit;
2487
+ padding-block: var(--sl-spacing-3x-small);
2488
+ font-weight: var(--sl-font-weight-normal);
2489
+ z-index: 0;
2490
+ }
2644
2491
  }
2645
- .custom-question-prompt-content {
2492
+ p:first-child {
2493
+ margin-top: 0;
2494
+ }
2495
+ p:last-child {
2496
+ margin-bottom: 0;
2497
+ }
2498
+ .hr-wrapper {
2646
2499
  position: relative;
2647
- display: flex;
2648
- flex-direction: column;
2649
- align-items: center;
2650
- justify-content: center;
2500
+ margin-top: calc(var(--sl-spacing-large) / 2);
2501
+ padding-bottom: calc(var(--sl-spacing-large) / 2);
2502
+ margin-bottom: calc(var(--sl-spacing-large) / 2);
2503
+ width: 100%;
2504
+ hr {
2505
+ position: relative;
2506
+ margin-bottom: 0;
2507
+ margin-top: 0;
2508
+ border-width: 0;
2509
+ border-top: 1px solid var(--sl-color-neutral-300);
2510
+ }
2511
+ }
2512
+ blockquote {
2513
+ position: relative;
2514
+ font-weight: 500;
2515
+ font-style: italic;
2651
2516
  color: var(--sl-color-neutral-600);
2652
- padding: var(--sl-spacing-small);
2653
- border: 1px solid var(--sl-color-neutral-300);
2517
+ border-left-style: solid;
2518
+ border-left-width: 0.15rem;
2519
+ border-left-color: var(--sl-color-neutral-300);
2520
+ padding-left: 0.5rem;
2521
+ quotes: "\\201C" "\\201D" "\\2018" "\\2019";
2522
+ margin-top: var(--sl-spacing-large);
2523
+ margin-bottom: var(--sl-spacing-large);
2524
+ }
2525
+ ol {
2526
+ position: relative;
2527
+ margin-bottom: var(--sl-spacing-large);
2528
+ padding-left: var(--sl-spacing-x-large);
2529
+ list-style-type: var(--be-ol-list-style-type);
2530
+ font-size: var(--sl-font-size-medium);
2531
+ li {
2532
+ padding-left: var(--sl-spacing-2x-small);
2533
+ ol {
2534
+ margin-bottom: 0;
2535
+ }
2536
+ }
2537
+ li::marker {
2538
+ font-weight: 400;
2539
+ color: var(--sl-color-neutral-500);
2540
+ }
2541
+ }
2542
+ ul {
2543
+ position: relative;
2544
+ margin-bottom: var(--sl-spacing-large);
2545
+ padding-left: var(--sl-spacing-x-large);
2546
+ list-style-type: disc;
2547
+ font-size: var(--sl-font-size-medium);
2548
+ li {
2549
+ padding-left: var(--sl-spacing-2x-small);
2550
+ ul {
2551
+ margin-bottom: 0;
2552
+ }
2553
+ }
2554
+ li::marker {
2555
+ color: var(--sl-color-neutral-400);
2556
+ }
2557
+ }
2558
+ li {
2559
+ margin-top: var(--sl-spacing-2x-small);
2560
+ margin-bottom: var(--sl-spacing-2x-small);
2561
+ }
2562
+ ul li:has(ul),
2563
+ ol li:has(ol) {
2564
+ list-style: none;
2565
+ }
2566
+ ol ol {
2567
+ list-style-type: lower-alpha;
2568
+ list-style-position: outside;
2569
+ }
2570
+ ol ol ol {
2571
+ list-style-type: upper-roman;
2572
+ list-style-position: outside;
2573
+ }
2574
+ ul ul {
2575
+ list-style-type: circle;
2576
+ list-style-position: outside;
2577
+ }
2578
+ ul ul ul {
2579
+ list-style-type: square;
2580
+ list-style-position: outside;
2581
+ }
2582
+ a {
2583
+ position: relative;
2584
+ color: var(--sl-color-primary-700);
2585
+ text-underline-offset: 2px;
2586
+ cursor: pointer;
2587
+ }
2588
+ a:hover {
2589
+ text-decoration: underline;
2590
+ }
2591
+ h1 {
2592
+ position: relative;
2593
+ text-wrap: balance;
2594
+ font-weight: 700;
2595
+ font-size: var(--sl-font-size-2x-large);
2596
+ letter-spacing: var(--sl-letter-spacing-dense);
2597
+ margin-top: var(--sl-spacing-2x-large);
2598
+ margin-bottom: var(--sl-spacing-large);
2599
+ line-height: var(--sl-line-height-x-denser);
2600
+ color: inherit;
2601
+ strong {
2602
+ font-weight: 800;
2603
+ }
2604
+ }
2605
+ h1:first-child {
2606
+ margin-top: 0;
2607
+ }
2608
+ h1:last-child {
2609
+ margin-bottom: 0;
2610
+ }
2611
+ h2 {
2612
+ position: relative;
2613
+ text-wrap: balance;
2614
+ font-weight: 600;
2615
+ font-size: var(--sl-font-size-x-large);
2616
+ letter-spacing: var(--sl-letter-spacing-dense);
2617
+ margin-top: var(--sl-spacing-2x-large);
2618
+ margin-bottom: var(--sl-spacing-large);
2619
+ line-height: var(--sl-line-height-denser);
2620
+ color: inherit;
2621
+ }
2622
+ h2:first-child {
2623
+ margin-top: 0;
2624
+ }
2625
+ h2:last-child {
2626
+ margin-bottom: 0;
2627
+ }
2628
+ h3 {
2629
+ position: relative;
2630
+ text-wrap: balance;
2631
+ font-weight: 600;
2632
+ font-size: var(--sl-font-size-large);
2633
+ letter-spacing: var(--sl-letter-spacing-dense);
2634
+ margin-top: var(--sl-spacing-x-large);
2635
+ margin-bottom: var(--sl-spacing-large);
2636
+ line-height: var(--sl-line-height-dense);
2637
+ color: inherit;
2638
+ }
2639
+ h3:first-child {
2640
+ margin-top: 0;
2641
+ }
2642
+ h3:last-child {
2643
+ margin-bottom: 0;
2644
+ }
2645
+ h4 {
2646
+ position: relative;
2647
+ text-wrap: balance;
2648
+ font-weight: 600;
2649
+ font-size: var(--sl-font-size-medium);
2650
+ letter-spacing: var(--sl-letter-spacing-dense);
2651
+ margin-top: var(--sl-spacing-x-large);
2652
+ margin-bottom: var(--sl-spacing-large);
2653
+ line-height: var(--sl-line-height-denser);
2654
+ color: inherit;
2655
+ }
2656
+ h4:first-child {
2657
+ margin-top: 0;
2658
+ }
2659
+ h4:last-child {
2660
+ margin-bottom: 0;
2661
+ }
2662
+ .hr-selected {
2654
2663
  border-radius: var(--sl-border-radius-medium);
2655
- border-color: var(--sl-color-neutral-300);
2656
- background-color: var(--sl-color-neutral-50);
2664
+ outline: 1px dashed var(--sl-color-primary-500);
2665
+ }
2666
+ .text-bold,
2667
+ .text-italic,
2668
+ .text-subscript,
2669
+ .text-superscript,
2670
+ .text-underline,
2671
+ .text-strikethrough,
2672
+ .text-underline-strikethrough {
2673
+ color: inherit;
2674
+ }
2675
+ .text-italic {
2676
+ font-style: italic;
2677
+ }
2678
+ .text-underline {
2679
+ text-decoration: underline;
2680
+ text-underline-offset: 2px;
2681
+ }
2682
+ .text-strikethrough {
2683
+ text-decoration: line-through;
2684
+ }
2685
+ .text-underline-strikethrough {
2686
+ text-decoration: underline line-through;
2687
+ text-underline-offset: 2px;
2688
+ }
2689
+ }
2690
+
2691
+ /* src/styles/article-variable.css */
2692
+ .be-article {
2693
+ --variable-placeholder-width: 10px;
2694
+ --variable-placeholder-height: 10px;
2695
+ --variable-highlight-border-width: 3px;
2696
+ strong.variable {
2697
+ font-weight: var(--sl-font-weight-bold);
2698
+ }
2699
+ em.variable,
2700
+ .variable.text-italic {
2701
+ font-style: italic;
2702
+ }
2703
+ .variable {
2704
+ background-color: var(--sl-color-neutral-200);
2705
+ color: var(--sl-color-neutral-700);
2706
+ padding-left: calc(var(--sl-spacing-2x-small));
2707
+ padding-right: var(--sl-spacing-2x-small);
2708
+ border-radius: var(--sl-border-radius-small);
2709
+ font-family: var(--sl-font-mono), monospace;
2710
+ font-style: normal;
2711
+ padding-block: var(--sl-spacing-3x-small);
2712
+ border-top-left-radius: 3px;
2713
+ border-bottom-left-radius: 3px;
2714
+ border-left: var(--variable-highlight-border-width) solid var(--sl-color-neutral-1000);
2715
+ font-weight: var(--sl-font-weight-normal);
2716
+ &[data-variable-highlighted] {
2717
+ background-color: #ebd9ff;
2718
+ border-left: var(--variable-highlight-border-width) solid #7b00ff;
2719
+ }
2720
+ }
2721
+ .variable-text-bold {
2722
+ font-weight: var(--sl-font-weight-bold);
2723
+ }
2724
+ .variable-text-italic {
2725
+ font-style: italic;
2726
+ }
2727
+ .variable-text-underline {
2728
+ text-decoration: underline;
2729
+ text-underline-offset: 2px;
2730
+ }
2731
+ .variable-placeholder {
2732
+ position: absolute;
2733
+ top: -3px;
2734
+ left: -3px;
2735
+ width: calc(var(--variable-placeholder-width) + 6px);
2736
+ height: calc(var(--variable-placeholder-height) + 6px);
2737
+ border-radius: var(--sl-border-radius-small);
2738
+ border-top: 1px solid var(--sl-color-primary-400);
2739
+ border-right: 1px solid var(--sl-color-primary-400);
2740
+ border-bottom: 1px solid var(--sl-color-primary-400);
2741
+ border-left: 1px solid var(--sl-color-primary-400);
2657
2742
  }
2658
2743
  }
2659
2744