@mirror-physics/fractal-ui 0.2.0-next.74 → 0.2.0-next.75
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.
- package/dist/index.cjs +184 -151
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +97 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +183 -151
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -1600,6 +1600,87 @@
|
|
|
1600
1600
|
color: var(--fg-disabled);
|
|
1601
1601
|
}
|
|
1602
1602
|
|
|
1603
|
+
/* src/components/Radio/Radio.css */
|
|
1604
|
+
.fractal-radio {
|
|
1605
|
+
position: relative;
|
|
1606
|
+
display: grid;
|
|
1607
|
+
grid-template-columns: 18px minmax(0, 1fr);
|
|
1608
|
+
align-items: start;
|
|
1609
|
+
gap: var(--space-2, 8px);
|
|
1610
|
+
color: var(--fg-primary);
|
|
1611
|
+
cursor: pointer;
|
|
1612
|
+
font-family: var(--font-sans);
|
|
1613
|
+
}
|
|
1614
|
+
.fractal-radio__input {
|
|
1615
|
+
position: absolute;
|
|
1616
|
+
width: 18px;
|
|
1617
|
+
height: 18px;
|
|
1618
|
+
margin: 0;
|
|
1619
|
+
opacity: 0;
|
|
1620
|
+
cursor: inherit;
|
|
1621
|
+
}
|
|
1622
|
+
.fractal-radio__control {
|
|
1623
|
+
display: grid;
|
|
1624
|
+
width: 18px;
|
|
1625
|
+
height: 18px;
|
|
1626
|
+
box-sizing: border-box;
|
|
1627
|
+
place-items: center;
|
|
1628
|
+
border: 1px solid var(--border-strong);
|
|
1629
|
+
border-radius: var(--radius-full, 9999px);
|
|
1630
|
+
background: var(--bg-canvas);
|
|
1631
|
+
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
1632
|
+
}
|
|
1633
|
+
.fractal-radio__dot {
|
|
1634
|
+
width: 8px;
|
|
1635
|
+
height: 8px;
|
|
1636
|
+
border-radius: var(--radius-full, 9999px);
|
|
1637
|
+
background: var(--accent-default);
|
|
1638
|
+
opacity: 0;
|
|
1639
|
+
transform: scale(0.5);
|
|
1640
|
+
transition: opacity 120ms ease, transform 120ms ease;
|
|
1641
|
+
}
|
|
1642
|
+
.fractal-radio__input:checked + .fractal-radio__control {
|
|
1643
|
+
border-color: var(--accent-default);
|
|
1644
|
+
}
|
|
1645
|
+
.fractal-radio__input:checked + .fractal-radio__control .fractal-radio__dot {
|
|
1646
|
+
opacity: 1;
|
|
1647
|
+
transform: scale(1);
|
|
1648
|
+
}
|
|
1649
|
+
.fractal-radio:hover:not(.fractal-radio--disabled) .fractal-radio__control {
|
|
1650
|
+
border-color: var(--fg-secondary);
|
|
1651
|
+
}
|
|
1652
|
+
.fractal-radio__input:focus-visible + .fractal-radio__control {
|
|
1653
|
+
box-shadow: 0 0 0 2px var(--bg-canvas), 0 0 0 4px var(--border-focus);
|
|
1654
|
+
}
|
|
1655
|
+
.fractal-radio__content {
|
|
1656
|
+
display: grid;
|
|
1657
|
+
min-width: 0;
|
|
1658
|
+
gap: 2px;
|
|
1659
|
+
}
|
|
1660
|
+
.fractal-radio__label {
|
|
1661
|
+
font-size: 0.8125rem;
|
|
1662
|
+
line-height: 18px;
|
|
1663
|
+
}
|
|
1664
|
+
.fractal-radio__description {
|
|
1665
|
+
color: var(--fg-secondary);
|
|
1666
|
+
font-size: 0.75rem;
|
|
1667
|
+
line-height: 1.4;
|
|
1668
|
+
}
|
|
1669
|
+
.fractal-radio--disabled {
|
|
1670
|
+
color: var(--fg-disabled);
|
|
1671
|
+
cursor: not-allowed;
|
|
1672
|
+
}
|
|
1673
|
+
.fractal-radio--disabled .fractal-radio__control {
|
|
1674
|
+
border-color: var(--border-subtle);
|
|
1675
|
+
background: var(--bg-surface-1);
|
|
1676
|
+
}
|
|
1677
|
+
.fractal-radio--disabled .fractal-radio__dot {
|
|
1678
|
+
background: var(--fg-disabled);
|
|
1679
|
+
}
|
|
1680
|
+
.fractal-radio--disabled .fractal-radio__description {
|
|
1681
|
+
color: var(--fg-disabled);
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1603
1684
|
/* src/components/SortableTable/SortableTable.css */
|
|
1604
1685
|
.fractal-sortable-table {
|
|
1605
1686
|
font-family: var(--font-sans);
|
|
@@ -1716,8 +1797,23 @@
|
|
|
1716
1797
|
background: var(--bg-surface-1);
|
|
1717
1798
|
}
|
|
1718
1799
|
.fractal-sortable-table-selection-cell {
|
|
1800
|
+
position: relative;
|
|
1719
1801
|
width: 52px;
|
|
1720
|
-
|
|
1802
|
+
min-width: 52px;
|
|
1803
|
+
padding: 0 !important;
|
|
1804
|
+
}
|
|
1805
|
+
.fractal-sortable-table-selection-cell > .fractal-checkbox {
|
|
1806
|
+
position: absolute;
|
|
1807
|
+
inset: 0;
|
|
1808
|
+
width: 100%;
|
|
1809
|
+
height: 100%;
|
|
1810
|
+
border-radius: 0;
|
|
1811
|
+
}
|
|
1812
|
+
.fractal-sortable-table-selection-cell > .fractal-checkbox:hover:not(:disabled) {
|
|
1813
|
+
background: var(--hover-surface);
|
|
1814
|
+
}
|
|
1815
|
+
.fractal-sortable-table-selection-cell > .fractal-checkbox:focus-visible {
|
|
1816
|
+
outline-offset: -2px;
|
|
1721
1817
|
}
|
|
1722
1818
|
.fractal-sortable-table-td--row-action {
|
|
1723
1819
|
position: relative;
|