@cirthcss/cirth 0.10.0 → 0.12.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.
- package/README.md +30 -12
- package/dist/cirth.classless.css +93 -226
- package/dist/cirth.classless.min.css +1 -1
- package/dist/cirth.classless.scoped.css +89 -226
- package/dist/cirth.classless.scoped.min.css +1 -1
- package/dist/cirth.css +91 -272
- package/dist/cirth.min.css +1 -1
- package/dist/cirth.scoped.css +90 -275
- package/dist/cirth.scoped.min.css +1 -1
- package/package.json +15 -8
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
.cirth {
|
|
13
|
+
scrollbar-gutter: stable;
|
|
13
14
|
-webkit-tap-highlight-color: transparent;
|
|
14
15
|
-webkit-text-size-adjust: 100%;
|
|
15
16
|
-moz-text-size-adjust: 100%;
|
|
@@ -233,6 +234,7 @@
|
|
|
233
234
|
--cirth-color: var(--cirth-primary-inverse);
|
|
234
235
|
--cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
|
|
235
236
|
max-width: 100%;
|
|
237
|
+
min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
236
238
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
237
239
|
border: var(--cirth-border-width) solid var(--cirth-border-color);
|
|
238
240
|
border-radius: var(--cirth-border-radius);
|
|
@@ -257,6 +259,7 @@
|
|
|
257
259
|
--cirth-color: var(--cirth-primary-inverse);
|
|
258
260
|
--cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
|
|
259
261
|
max-width: 100%;
|
|
262
|
+
min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
260
263
|
padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
|
|
261
264
|
border: var(--cirth-border-width) solid var(--cirth-border-color);
|
|
262
265
|
border-radius: var(--cirth-border-radius);
|
|
@@ -536,6 +539,10 @@
|
|
|
536
539
|
height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
537
540
|
}
|
|
538
541
|
|
|
542
|
+
.cirth select, .cirth textarea {
|
|
543
|
+
min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
544
|
+
}
|
|
545
|
+
|
|
539
546
|
.cirth fieldset {
|
|
540
547
|
width: 100%;
|
|
541
548
|
margin: 0;
|
|
@@ -682,6 +689,10 @@
|
|
|
682
689
|
display: block;
|
|
683
690
|
}
|
|
684
691
|
|
|
692
|
+
.cirth textarea:not([rows]) {
|
|
693
|
+
min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
|
|
694
|
+
}
|
|
695
|
+
|
|
685
696
|
.cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
|
|
686
697
|
--cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
|
|
687
698
|
var(--cirth-form-element-spacing-vertical) * 2 +
|
|
@@ -726,14 +737,6 @@
|
|
|
726
737
|
margin-inline-end: .5em;
|
|
727
738
|
}
|
|
728
739
|
|
|
729
|
-
.cirth [type="checkbox"]::-ms-check {
|
|
730
|
-
display: none;
|
|
731
|
-
}
|
|
732
|
-
|
|
733
|
-
.cirth [type="radio"]::-ms-check {
|
|
734
|
-
display: none;
|
|
735
|
-
}
|
|
736
|
-
|
|
737
740
|
.cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
|
|
738
741
|
--cirth-background-color: var(--cirth-primary-background);
|
|
739
742
|
--cirth-border-color: var(--cirth-primary-border);
|
|
@@ -927,6 +930,7 @@
|
|
|
927
930
|
}
|
|
928
931
|
|
|
929
932
|
.cirth [type="file"]::file-selector-button {
|
|
933
|
+
min-block-size: 0;
|
|
930
934
|
padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
|
|
931
935
|
margin-inline-end: calc(var(--cirth-spacing) / 2);
|
|
932
936
|
}
|
|
@@ -964,14 +968,6 @@
|
|
|
964
968
|
transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
|
|
965
969
|
}
|
|
966
970
|
|
|
967
|
-
.cirth [type="range"]::-ms-track {
|
|
968
|
-
border-radius: var(--cirth-border-radius);
|
|
969
|
-
background-color: var(--cirth-range-border-color);
|
|
970
|
-
width: 100%;
|
|
971
|
-
height: .375rem;
|
|
972
|
-
transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
|
|
973
|
-
}
|
|
974
|
-
|
|
975
971
|
.cirth [type="range"]::-webkit-slider-thumb {
|
|
976
972
|
-webkit-appearance: none;
|
|
977
973
|
border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
|
|
@@ -985,19 +981,6 @@
|
|
|
985
981
|
}
|
|
986
982
|
|
|
987
983
|
.cirth [type="range"]::-moz-range-thumb {
|
|
988
|
-
-webkit-appearance: none;
|
|
989
|
-
border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
|
|
990
|
-
background-color: var(--cirth-range-thumb-color);
|
|
991
|
-
cursor: pointer;
|
|
992
|
-
width: 1.25rem;
|
|
993
|
-
height: 1.25rem;
|
|
994
|
-
transition: background-color var(--cirth-transition), transform var(--cirth-transition);
|
|
995
|
-
border-radius: 50%;
|
|
996
|
-
margin-top: -.4375rem;
|
|
997
|
-
}
|
|
998
|
-
|
|
999
|
-
.cirth [type="range"]::-ms-thumb {
|
|
1000
|
-
-webkit-appearance: none;
|
|
1001
984
|
border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
|
|
1002
985
|
background-color: var(--cirth-range-thumb-color);
|
|
1003
986
|
cursor: pointer;
|
|
@@ -1021,10 +1004,6 @@
|
|
|
1021
1004
|
transform: scale(1.25);
|
|
1022
1005
|
}
|
|
1023
1006
|
|
|
1024
|
-
.cirth [type="range"]:active::-ms-thumb {
|
|
1025
|
-
transform: scale(1.25);
|
|
1026
|
-
}
|
|
1027
|
-
|
|
1028
1007
|
.cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
|
|
1029
1008
|
background-image: var(--cirth-icon-search);
|
|
1030
1009
|
background-position: center left var(--cirth-form-element-spacing-horizontal);
|
|
@@ -1078,10 +1057,6 @@
|
|
|
1078
1057
|
display: none;
|
|
1079
1058
|
}
|
|
1080
1059
|
|
|
1081
|
-
.cirth details summary::-moz-list-bullet {
|
|
1082
|
-
list-style-type: none;
|
|
1083
|
-
}
|
|
1084
|
-
|
|
1085
1060
|
.cirth details summary:after {
|
|
1086
1061
|
width: var(--cirth-size-4);
|
|
1087
1062
|
height: var(--cirth-size-4);
|
|
@@ -1439,17 +1414,14 @@
|
|
|
1439
1414
|
background: var(--cirth-meter-even-less-good-color);
|
|
1440
1415
|
}
|
|
1441
1416
|
|
|
1442
|
-
.cirth {
|
|
1443
|
-
--cirth-scrollbar-width: 0px;
|
|
1444
|
-
}
|
|
1445
|
-
|
|
1446
1417
|
.cirth dialog {
|
|
1418
|
+
opacity: 0;
|
|
1419
|
+
transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
|
|
1447
1420
|
z-index: var(--cirth-z-index-modal);
|
|
1448
1421
|
width: inherit;
|
|
1449
1422
|
min-width: 100%;
|
|
1450
1423
|
height: inherit;
|
|
1451
1424
|
min-height: 100%;
|
|
1452
|
-
-webkit-backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
|
|
1453
1425
|
backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
|
|
1454
1426
|
background-color: var(--cirth-modal-overlay-background-color);
|
|
1455
1427
|
color: var(--cirth-color);
|
|
@@ -1462,7 +1434,25 @@
|
|
|
1462
1434
|
inset: 0;
|
|
1463
1435
|
}
|
|
1464
1436
|
|
|
1437
|
+
.cirth dialog[open] {
|
|
1438
|
+
opacity: 1;
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
@starting-style {
|
|
1442
|
+
.cirth dialog[open] {
|
|
1443
|
+
opacity: 0;
|
|
1444
|
+
}
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
@starting-style {
|
|
1448
|
+
.cirth dialog[open] > article {
|
|
1449
|
+
opacity: 0;
|
|
1450
|
+
transform: translateY(-100%);
|
|
1451
|
+
}
|
|
1452
|
+
}
|
|
1453
|
+
|
|
1465
1454
|
.cirth dialog > article {
|
|
1455
|
+
transition: opacity var(--cirth-transition), transform var(--cirth-transition);
|
|
1466
1456
|
width: 100%;
|
|
1467
1457
|
max-height: calc(100vh - var(--cirth-spacing) * 2);
|
|
1468
1458
|
max-height: calc(100dvh - var(--cirth-spacing) * 2);
|
|
@@ -1470,13 +1460,13 @@
|
|
|
1470
1460
|
overflow: auto;
|
|
1471
1461
|
}
|
|
1472
1462
|
|
|
1473
|
-
@media (
|
|
1463
|
+
@media (width >= 576px) {
|
|
1474
1464
|
.cirth dialog > article {
|
|
1475
1465
|
max-width: 510px;
|
|
1476
1466
|
}
|
|
1477
1467
|
}
|
|
1478
1468
|
|
|
1479
|
-
@media (
|
|
1469
|
+
@media (width >= 768px) {
|
|
1480
1470
|
.cirth dialog > article {
|
|
1481
1471
|
max-width: 700px;
|
|
1482
1472
|
}
|
|
@@ -1487,7 +1477,7 @@
|
|
|
1487
1477
|
}
|
|
1488
1478
|
|
|
1489
1479
|
.cirth dialog > article > header :is(a, button)[rel="prev"] {
|
|
1490
|
-
margin:
|
|
1480
|
+
margin: calc(calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * -1);
|
|
1491
1481
|
float: right;
|
|
1492
1482
|
margin-inline-start: var(--cirth-spacing);
|
|
1493
1483
|
padding: 0;
|
|
@@ -1506,10 +1496,11 @@
|
|
|
1506
1496
|
}
|
|
1507
1497
|
|
|
1508
1498
|
.cirth dialog > article :is(a, button)[rel="prev"] {
|
|
1509
|
-
width: var(--cirth-size-4);
|
|
1510
|
-
height: var(--cirth-size-4);
|
|
1511
|
-
margin-top: calc(var(--cirth-spacing) * -1);
|
|
1512
|
-
margin-
|
|
1499
|
+
width: calc(var(--cirth-size-4) + calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * 2);
|
|
1500
|
+
height: calc(var(--cirth-size-4) + calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * 2);
|
|
1501
|
+
margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2));
|
|
1502
|
+
margin-right: calc(calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * -1);
|
|
1503
|
+
margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2));
|
|
1513
1504
|
background-image: var(--cirth-icon-close);
|
|
1514
1505
|
background-position: center;
|
|
1515
1506
|
background-size: auto var(--cirth-size-4);
|
|
@@ -1587,6 +1578,7 @@
|
|
|
1587
1578
|
|
|
1588
1579
|
.cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
|
|
1589
1580
|
height: auto;
|
|
1581
|
+
min-block-size: var(--cirth-size-6);
|
|
1590
1582
|
margin-inline: inherit;
|
|
1591
1583
|
padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
|
|
1592
1584
|
margin-bottom: 0;
|
|
@@ -1641,6 +1633,35 @@
|
|
|
1641
1633
|
margin: inherit;
|
|
1642
1634
|
}
|
|
1643
1635
|
|
|
1636
|
+
.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog) {
|
|
1637
|
+
--cirth-popover-display: block;
|
|
1638
|
+
display: none;
|
|
1639
|
+
}
|
|
1640
|
+
|
|
1641
|
+
.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
|
|
1642
|
+
display: var(--cirth-popover-display);
|
|
1643
|
+
max-width: var(--cirth-popover-max-width);
|
|
1644
|
+
padding: var(--cirth-space-2) var(--cirth-space-3);
|
|
1645
|
+
border: var(--cirth-border-width) solid var(--cirth-popover-border-color);
|
|
1646
|
+
border-radius: var(--cirth-border-radius);
|
|
1647
|
+
background-color: var(--cirth-popover-background-color);
|
|
1648
|
+
box-shadow: var(--cirth-popover-box-shadow);
|
|
1649
|
+
color: var(--cirth-popover-color);
|
|
1650
|
+
transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
|
|
1651
|
+
margin: auto;
|
|
1652
|
+
inset: 0;
|
|
1653
|
+
}
|
|
1654
|
+
|
|
1655
|
+
@starting-style {
|
|
1656
|
+
.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
|
|
1657
|
+
opacity: 0;
|
|
1658
|
+
}
|
|
1659
|
+
}
|
|
1660
|
+
|
|
1661
|
+
.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):not(:popover-open) {
|
|
1662
|
+
opacity: 0;
|
|
1663
|
+
}
|
|
1664
|
+
|
|
1644
1665
|
.cirth progress {
|
|
1645
1666
|
vertical-align: baseline;
|
|
1646
1667
|
appearance: none;
|
|
@@ -1650,7 +1671,6 @@
|
|
|
1650
1671
|
border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
|
|
1651
1672
|
border-radius: var(--cirth-border-radius);
|
|
1652
1673
|
background-color: var(--cirth-progress-background-color);
|
|
1653
|
-
color: var(--cirth-progress-color);
|
|
1654
1674
|
display: inline-block;
|
|
1655
1675
|
overflow: hidden;
|
|
1656
1676
|
}
|
|
@@ -1698,160 +1718,6 @@
|
|
|
1698
1718
|
}
|
|
1699
1719
|
}
|
|
1700
1720
|
|
|
1701
|
-
.cirth [data-tooltip] {
|
|
1702
|
-
position: relative;
|
|
1703
|
-
}
|
|
1704
|
-
|
|
1705
|
-
.cirth [data-tooltip]:not(a, button, input, [role="button"]) {
|
|
1706
|
-
border-bottom: var(--cirth-border-width-1) dotted;
|
|
1707
|
-
cursor: help;
|
|
1708
|
-
text-decoration: none;
|
|
1709
|
-
}
|
|
1710
|
-
|
|
1711
|
-
.cirth [data-tooltip][data-placement="top"]:before, .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:before, .cirth [data-tooltip]:after {
|
|
1712
|
-
z-index: var(--cirth-z-index-tooltip);
|
|
1713
|
-
padding: var(--cirth-space-1) var(--cirth-space-2);
|
|
1714
|
-
border-radius: var(--cirth-border-radius);
|
|
1715
|
-
background: var(--cirth-tooltip-background-color);
|
|
1716
|
-
content: attr(data-tooltip);
|
|
1717
|
-
color: var(--cirth-tooltip-color);
|
|
1718
|
-
font-style: normal;
|
|
1719
|
-
font-weight: var(--cirth-font-weight);
|
|
1720
|
-
font-size: var(--cirth-font-size-sm);
|
|
1721
|
-
text-overflow: ellipsis;
|
|
1722
|
-
white-space: nowrap;
|
|
1723
|
-
opacity: 0;
|
|
1724
|
-
pointer-events: none;
|
|
1725
|
-
text-decoration: none;
|
|
1726
|
-
display: block;
|
|
1727
|
-
position: absolute;
|
|
1728
|
-
bottom: 100%;
|
|
1729
|
-
left: 50%;
|
|
1730
|
-
overflow: hidden;
|
|
1731
|
-
transform: translate(-50%, -.25rem);
|
|
1732
|
-
}
|
|
1733
|
-
|
|
1734
|
-
.cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
|
|
1735
|
-
content: "";
|
|
1736
|
-
color: var(--cirth-tooltip-background-color);
|
|
1737
|
-
background-color: #0000;
|
|
1738
|
-
border-top: .3rem solid;
|
|
1739
|
-
border-left: .3rem solid #0000;
|
|
1740
|
-
border-right: .3rem solid #0000;
|
|
1741
|
-
border-radius: 0;
|
|
1742
|
-
padding: 0;
|
|
1743
|
-
transform: translate(-50%);
|
|
1744
|
-
}
|
|
1745
|
-
|
|
1746
|
-
.cirth [data-tooltip][data-placement="bottom"]:before, .cirth [data-tooltip][data-placement="bottom"]:after {
|
|
1747
|
-
top: 100%;
|
|
1748
|
-
bottom: auto;
|
|
1749
|
-
transform: translate(-50%, .25rem);
|
|
1750
|
-
}
|
|
1751
|
-
|
|
1752
|
-
.cirth [data-tooltip][data-placement="bottom"]:after {
|
|
1753
|
-
border: .3rem solid #0000;
|
|
1754
|
-
border-bottom-color: currentColor;
|
|
1755
|
-
transform: translate(-50%, -.3rem);
|
|
1756
|
-
}
|
|
1757
|
-
|
|
1758
|
-
.cirth [data-tooltip][data-placement="left"]:before, .cirth [data-tooltip][data-placement="left"]:after {
|
|
1759
|
-
inset: 50% 100% auto auto;
|
|
1760
|
-
transform: translate(-.25rem, -50%);
|
|
1761
|
-
}
|
|
1762
|
-
|
|
1763
|
-
.cirth [data-tooltip][data-placement="left"]:after {
|
|
1764
|
-
border: .3rem solid #0000;
|
|
1765
|
-
border-left-color: currentColor;
|
|
1766
|
-
transform: translate(.3rem, -50%);
|
|
1767
|
-
}
|
|
1768
|
-
|
|
1769
|
-
.cirth [data-tooltip][data-placement="right"]:before, .cirth [data-tooltip][data-placement="right"]:after {
|
|
1770
|
-
inset: 50% auto auto 100%;
|
|
1771
|
-
transform: translate(.25rem, -50%);
|
|
1772
|
-
}
|
|
1773
|
-
|
|
1774
|
-
.cirth [data-tooltip][data-placement="right"]:after {
|
|
1775
|
-
border: .3rem solid #0000;
|
|
1776
|
-
border-right-color: currentColor;
|
|
1777
|
-
transform: translate(-.3rem, -50%);
|
|
1778
|
-
}
|
|
1779
|
-
|
|
1780
|
-
.cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
|
|
1781
|
-
opacity: 1;
|
|
1782
|
-
}
|
|
1783
|
-
|
|
1784
|
-
@media (hover: hover) and (pointer: fine) {
|
|
1785
|
-
.cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
|
|
1786
|
-
--cirth-tooltip-slide-to: translate(-50%, -.25rem);
|
|
1787
|
-
animation-duration: var(--cirth-duration-normal);
|
|
1788
|
-
opacity: 0;
|
|
1789
|
-
animation-name: tooltip-slide;
|
|
1790
|
-
animation-fill-mode: forwards;
|
|
1791
|
-
transform: translate(-50%, .75rem);
|
|
1792
|
-
}
|
|
1793
|
-
|
|
1794
|
-
.cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:after {
|
|
1795
|
-
--cirth-tooltip-caret-slide-to: translate(-50%, 0rem);
|
|
1796
|
-
animation-name: tooltip-caret-slide;
|
|
1797
|
-
transform: translate(-50%, -.25rem);
|
|
1798
|
-
}
|
|
1799
|
-
|
|
1800
|
-
.cirth [data-tooltip][data-placement="bottom"]:focus:before, .cirth [data-tooltip][data-placement="bottom"]:focus:after, .cirth [data-tooltip][data-placement="bottom"]:hover:before, .cirth [data-tooltip][data-placement="bottom"]:hover:after {
|
|
1801
|
-
--cirth-tooltip-slide-to: translate(-50%, .25rem);
|
|
1802
|
-
animation-name: tooltip-slide;
|
|
1803
|
-
transform: translate(-50%, -.75rem);
|
|
1804
|
-
}
|
|
1805
|
-
|
|
1806
|
-
.cirth [data-tooltip][data-placement="bottom"]:focus:after, .cirth [data-tooltip][data-placement="bottom"]:hover:after {
|
|
1807
|
-
--cirth-tooltip-caret-slide-to: translate(-50%, -.3rem);
|
|
1808
|
-
animation-name: tooltip-caret-slide;
|
|
1809
|
-
transform: translate(-50%, -.5rem);
|
|
1810
|
-
}
|
|
1811
|
-
|
|
1812
|
-
.cirth [data-tooltip][data-placement="left"]:focus:before, .cirth [data-tooltip][data-placement="left"]:focus:after, .cirth [data-tooltip][data-placement="left"]:hover:before, .cirth [data-tooltip][data-placement="left"]:hover:after {
|
|
1813
|
-
--cirth-tooltip-slide-to: translate(-.25rem, -50%);
|
|
1814
|
-
animation-name: tooltip-slide;
|
|
1815
|
-
transform: translate(.75rem, -50%);
|
|
1816
|
-
}
|
|
1817
|
-
|
|
1818
|
-
.cirth [data-tooltip][data-placement="left"]:focus:after, .cirth [data-tooltip][data-placement="left"]:hover:after {
|
|
1819
|
-
--cirth-tooltip-caret-slide-to: translate(.3rem, -50%);
|
|
1820
|
-
animation-name: tooltip-caret-slide;
|
|
1821
|
-
transform: translate(.05rem, -50%);
|
|
1822
|
-
}
|
|
1823
|
-
|
|
1824
|
-
.cirth [data-tooltip][data-placement="right"]:focus:before, .cirth [data-tooltip][data-placement="right"]:focus:after, .cirth [data-tooltip][data-placement="right"]:hover:before, .cirth [data-tooltip][data-placement="right"]:hover:after {
|
|
1825
|
-
--cirth-tooltip-slide-to: translate(.25rem, -50%);
|
|
1826
|
-
animation-name: tooltip-slide;
|
|
1827
|
-
transform: translate(-.75rem, -50%);
|
|
1828
|
-
}
|
|
1829
|
-
|
|
1830
|
-
.cirth [data-tooltip][data-placement="right"]:focus:after, .cirth [data-tooltip][data-placement="right"]:hover:after {
|
|
1831
|
-
--cirth-tooltip-caret-slide-to: translate(-.3rem, -50%);
|
|
1832
|
-
animation-name: tooltip-caret-slide;
|
|
1833
|
-
transform: translate(-.05rem, -50%);
|
|
1834
|
-
}
|
|
1835
|
-
}
|
|
1836
|
-
|
|
1837
|
-
@keyframes tooltip-slide {
|
|
1838
|
-
to {
|
|
1839
|
-
transform: var(--cirth-tooltip-slide-to);
|
|
1840
|
-
opacity: 1;
|
|
1841
|
-
}
|
|
1842
|
-
}
|
|
1843
|
-
|
|
1844
|
-
@keyframes tooltip-caret-slide {
|
|
1845
|
-
50% {
|
|
1846
|
-
opacity: 0;
|
|
1847
|
-
}
|
|
1848
|
-
|
|
1849
|
-
100% {
|
|
1850
|
-
transform: var(--cirth-tooltip-caret-slide-to);
|
|
1851
|
-
opacity: 1;
|
|
1852
|
-
}
|
|
1853
|
-
}
|
|
1854
|
-
|
|
1855
1721
|
.cirth [aria-controls] {
|
|
1856
1722
|
cursor: pointer;
|
|
1857
1723
|
}
|
|
@@ -1978,7 +1844,6 @@
|
|
|
1978
1844
|
--cirth-z-index-fixed: 1030;
|
|
1979
1845
|
--cirth-z-index-modal-backdrop: 1040;
|
|
1980
1846
|
--cirth-z-index-modal: 1050;
|
|
1981
|
-
--cirth-z-index-tooltip: 1070;
|
|
1982
1847
|
--cirth-font-family: var(--cirth-font-family-sans);
|
|
1983
1848
|
--cirth-line-height: var(--cirth-line-height-normal);
|
|
1984
1849
|
--cirth-font-weight: var(--cirth-font-weight-regular);
|
|
@@ -2008,20 +1873,25 @@
|
|
|
2008
1873
|
var(--cirth-form-element-border-color);
|
|
2009
1874
|
--cirth-meter-background-color: var(--cirth-progress-background-color);
|
|
2010
1875
|
--cirth-meter-border-color: var(--cirth-progress-border-color);
|
|
1876
|
+
--cirth-popover-background-color: var(--cirth-card-background-color);
|
|
1877
|
+
--cirth-popover-border-color: var(--cirth-muted-border-color);
|
|
1878
|
+
--cirth-popover-color: var(--cirth-color);
|
|
1879
|
+
--cirth-popover-box-shadow: var(--cirth-box-shadow);
|
|
1880
|
+
--cirth-popover-max-width: min(30rem, 100% - var(--cirth-spacing) * 2);
|
|
2011
1881
|
--cirth-modal-overlay-backdrop-filter: blur(.375rem);
|
|
2012
1882
|
--cirth-nav-element-spacing-vertical: var(--cirth-space-4);
|
|
2013
1883
|
--cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
|
|
2014
1884
|
--cirth-nav-link-spacing-vertical: var(--cirth-space-2);
|
|
2015
1885
|
--cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
|
|
2016
1886
|
--cirth-nav-breadcrumb-divider: ">";
|
|
2017
|
-
--cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2018
|
-
--cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2019
|
-
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2020
|
-
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2021
|
-
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2022
|
-
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2023
|
-
--cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
2024
|
-
--cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none'
|
|
1887
|
+
--cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
1888
|
+
--cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
|
|
1889
|
+
--cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
|
1890
|
+
--cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
|
|
1891
|
+
--cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
|
|
1892
|
+
--cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
|
1893
|
+
--cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
|
|
1894
|
+
--cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
|
|
2025
1895
|
}
|
|
2026
1896
|
|
|
2027
1897
|
.cirth a {
|
|
@@ -2251,10 +2121,8 @@
|
|
|
2251
2121
|
--cirth-progress-background-color: oklch(91.7% .006 264);
|
|
2252
2122
|
--cirth-progress-border-color: oklch(61.3% .032 264);
|
|
2253
2123
|
--cirth-progress-color: var(--cirth-primary-background);
|
|
2254
|
-
--cirth-
|
|
2255
|
-
--cirth-
|
|
2256
|
-
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2257
|
-
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2124
|
+
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2125
|
+
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2258
2126
|
}
|
|
2259
2127
|
|
|
2260
2128
|
.cirth:where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth:where(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
|
|
@@ -2363,10 +2231,8 @@
|
|
|
2363
2231
|
--cirth-progress-background-color: oklch(26.7% .011 264);
|
|
2364
2232
|
--cirth-progress-border-color: oklch(52.7% .032 264);
|
|
2365
2233
|
--cirth-progress-color: oklch(61.3% .113 69.35);
|
|
2366
|
-
--cirth-
|
|
2367
|
-
--cirth-
|
|
2368
|
-
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2369
|
-
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2234
|
+
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2235
|
+
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2370
2236
|
}
|
|
2371
2237
|
|
|
2372
2238
|
.cirth:where(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
|
|
@@ -2475,10 +2341,8 @@
|
|
|
2475
2341
|
--cirth-progress-background-color: oklch(26.7% .011 264);
|
|
2476
2342
|
--cirth-progress-border-color: oklch(52.7% .032 264);
|
|
2477
2343
|
--cirth-progress-color: oklch(61.3% .113 69.35);
|
|
2478
|
-
--cirth-
|
|
2479
|
-
--cirth-
|
|
2480
|
-
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2481
|
-
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2344
|
+
--cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
|
2345
|
+
--cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
|
|
2482
2346
|
}
|
|
2483
2347
|
|
|
2484
2348
|
.cirth:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
|
|
@@ -2689,7 +2553,6 @@
|
|
|
2689
2553
|
}
|
|
2690
2554
|
|
|
2691
2555
|
.cirth dialog {
|
|
2692
|
-
-webkit-backdrop-filter: none;
|
|
2693
2556
|
backdrop-filter: none;
|
|
2694
2557
|
min-width: 0;
|
|
2695
2558
|
min-height: 0;
|