@gravionlabs/helix-ui 22.1.30 → 22.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.
- package/README.md +2 -0
- package/fesm2022/gravionlabs-helix-ui.mjs +6950 -5320
- package/fesm2022/gravionlabs-helix-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.css +338 -0
- package/tokens.css +2 -1
- package/types/gravionlabs-helix-ui.d.ts +646 -63
package/package.json
CHANGED
package/styles.css
CHANGED
|
@@ -1517,6 +1517,223 @@
|
|
|
1517
1517
|
padding: var(--h-confirmpopup-footer-padding);
|
|
1518
1518
|
}
|
|
1519
1519
|
|
|
1520
|
+
/* data-table */
|
|
1521
|
+
/*
|
|
1522
|
+
* Data table: `<hx-data-table>`. The table itself is drawn by `table.scss` (`.hx-table`); this sheet adds the frame
|
|
1523
|
+
* with the loading cover, the visually hidden caption, the empty row and the column alignment, from the
|
|
1524
|
+
* `--h-datatable-*` tokens.
|
|
1525
|
+
*/
|
|
1526
|
+
.hx-data-table {
|
|
1527
|
+
display: block;
|
|
1528
|
+
}
|
|
1529
|
+
|
|
1530
|
+
.hx-data-table-frame {
|
|
1531
|
+
position: relative;
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
.hx-data-table-scroll:not(.hx-data-table-scrolls) {
|
|
1535
|
+
overflow: visible;
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
.hx-data-table-caption-hidden {
|
|
1539
|
+
position: absolute;
|
|
1540
|
+
width: 1px;
|
|
1541
|
+
height: 1px;
|
|
1542
|
+
margin: -1px;
|
|
1543
|
+
padding: 0;
|
|
1544
|
+
overflow: hidden;
|
|
1545
|
+
clip-path: inset(50%);
|
|
1546
|
+
white-space: nowrap;
|
|
1547
|
+
border: 0;
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
.hx-table .hx-data-table-align-center {
|
|
1551
|
+
text-align: center;
|
|
1552
|
+
}
|
|
1553
|
+
|
|
1554
|
+
.hx-table .hx-data-table-align-right {
|
|
1555
|
+
text-align: end;
|
|
1556
|
+
}
|
|
1557
|
+
|
|
1558
|
+
.hx-data-table-empty td {
|
|
1559
|
+
color: var(--h-datatable-row-color);
|
|
1560
|
+
text-align: center;
|
|
1561
|
+
opacity: 0.7;
|
|
1562
|
+
}
|
|
1563
|
+
|
|
1564
|
+
.hx-data-table-loading {
|
|
1565
|
+
position: absolute;
|
|
1566
|
+
inset: 0;
|
|
1567
|
+
z-index: 2;
|
|
1568
|
+
display: flex;
|
|
1569
|
+
align-items: center;
|
|
1570
|
+
justify-content: center;
|
|
1571
|
+
background: color-mix(in srgb, var(--h-datatable-row-background) 60%, transparent);
|
|
1572
|
+
}
|
|
1573
|
+
|
|
1574
|
+
.hx-data-table-loading hx-progress-spinner {
|
|
1575
|
+
width: 2.5rem;
|
|
1576
|
+
height: 2.5rem;
|
|
1577
|
+
}
|
|
1578
|
+
|
|
1579
|
+
/* sortable headers: a button that fills the header cell */
|
|
1580
|
+
.hx-data-table-sort {
|
|
1581
|
+
display: inline-flex;
|
|
1582
|
+
align-items: center;
|
|
1583
|
+
gap: var(--h-datatable-header-cell-gap);
|
|
1584
|
+
width: 100%;
|
|
1585
|
+
margin: 0;
|
|
1586
|
+
padding: 0;
|
|
1587
|
+
border: 0;
|
|
1588
|
+
background: transparent;
|
|
1589
|
+
color: inherit;
|
|
1590
|
+
font: inherit;
|
|
1591
|
+
text-align: inherit;
|
|
1592
|
+
cursor: pointer;
|
|
1593
|
+
border-radius: 2px;
|
|
1594
|
+
outline-color: transparent;
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
.hx-data-table-align-center .hx-data-table-sort {
|
|
1598
|
+
justify-content: center;
|
|
1599
|
+
}
|
|
1600
|
+
|
|
1601
|
+
.hx-data-table-align-right .hx-data-table-sort {
|
|
1602
|
+
justify-content: flex-end;
|
|
1603
|
+
}
|
|
1604
|
+
|
|
1605
|
+
.hx-data-table-sort:hover {
|
|
1606
|
+
color: var(--h-datatable-header-cell-hover-color);
|
|
1607
|
+
}
|
|
1608
|
+
|
|
1609
|
+
.hx-data-table-sort:focus-visible {
|
|
1610
|
+
outline: var(--h-datatable-header-cell-focus-ring-width) var(--h-datatable-header-cell-focus-ring-style) var(--h-datatable-header-cell-focus-ring-color);
|
|
1611
|
+
outline-offset: var(--h-datatable-header-cell-focus-ring-offset);
|
|
1612
|
+
box-shadow: var(--h-datatable-header-cell-focus-ring-shadow);
|
|
1613
|
+
}
|
|
1614
|
+
|
|
1615
|
+
.hx-table thead th.hx-data-table-sorted {
|
|
1616
|
+
background: var(--h-datatable-header-cell-selected-background);
|
|
1617
|
+
color: var(--h-datatable-header-cell-selected-color);
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1620
|
+
.hx-data-table-sort-icon {
|
|
1621
|
+
display: inline-block;
|
|
1622
|
+
flex: none;
|
|
1623
|
+
width: var(--h-datatable-sort-icon-size);
|
|
1624
|
+
height: var(--h-datatable-sort-icon-size);
|
|
1625
|
+
background: var(--h-datatable-sort-icon-color);
|
|
1626
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1627
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 9 4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1628
|
+
}
|
|
1629
|
+
|
|
1630
|
+
.hx-data-table-sort:hover .hx-data-table-sort-icon {
|
|
1631
|
+
background: var(--h-datatable-sort-icon-hover-color);
|
|
1632
|
+
}
|
|
1633
|
+
|
|
1634
|
+
.hx-data-table-sort-asc {
|
|
1635
|
+
display: inline-block;
|
|
1636
|
+
flex: none;
|
|
1637
|
+
width: var(--h-datatable-sort-icon-size);
|
|
1638
|
+
height: var(--h-datatable-sort-icon-size);
|
|
1639
|
+
background: currentcolor;
|
|
1640
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1641
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 15 6-6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1642
|
+
}
|
|
1643
|
+
|
|
1644
|
+
.hx-data-table-sort-desc {
|
|
1645
|
+
display: inline-block;
|
|
1646
|
+
flex: none;
|
|
1647
|
+
width: var(--h-datatable-sort-icon-size);
|
|
1648
|
+
height: var(--h-datatable-sort-icon-size);
|
|
1649
|
+
background: currentcolor;
|
|
1650
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1651
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1652
|
+
}
|
|
1653
|
+
|
|
1654
|
+
.hx-data-table-sort-rank {
|
|
1655
|
+
font-size: 0.75em;
|
|
1656
|
+
opacity: 0.8;
|
|
1657
|
+
}
|
|
1658
|
+
|
|
1659
|
+
.hx-data-table-paginator {
|
|
1660
|
+
border-block-start: 1px solid var(--h-datatable-border-color);
|
|
1661
|
+
}
|
|
1662
|
+
|
|
1663
|
+
/* selection and expansion */
|
|
1664
|
+
.hx-data-table-select-cell,
|
|
1665
|
+
.hx-data-table-expander-cell {
|
|
1666
|
+
width: 1%;
|
|
1667
|
+
white-space: nowrap;
|
|
1668
|
+
}
|
|
1669
|
+
|
|
1670
|
+
.hx-data-table-selectable {
|
|
1671
|
+
cursor: pointer;
|
|
1672
|
+
}
|
|
1673
|
+
|
|
1674
|
+
.hx-data-table-selectable:focus-visible {
|
|
1675
|
+
outline: var(--h-datatable-row-focus-ring-width) var(--h-datatable-row-focus-ring-style) var(--h-datatable-row-focus-ring-color);
|
|
1676
|
+
outline-offset: calc(-1 * var(--h-datatable-row-focus-ring-width));
|
|
1677
|
+
box-shadow: var(--h-datatable-row-focus-ring-shadow);
|
|
1678
|
+
}
|
|
1679
|
+
|
|
1680
|
+
.hx-data-table-filter-row th {
|
|
1681
|
+
padding-block: 0.25rem 0.5rem;
|
|
1682
|
+
font-weight: normal;
|
|
1683
|
+
}
|
|
1684
|
+
|
|
1685
|
+
.hx-data-table-expander {
|
|
1686
|
+
display: inline-flex;
|
|
1687
|
+
align-items: center;
|
|
1688
|
+
justify-content: center;
|
|
1689
|
+
width: var(--h-datatable-row-toggle-button-size);
|
|
1690
|
+
height: var(--h-datatable-row-toggle-button-size);
|
|
1691
|
+
padding: 0;
|
|
1692
|
+
border: 0;
|
|
1693
|
+
border-radius: var(--h-datatable-row-toggle-button-border-radius);
|
|
1694
|
+
background: transparent;
|
|
1695
|
+
color: var(--h-datatable-row-toggle-button-color);
|
|
1696
|
+
cursor: pointer;
|
|
1697
|
+
outline-color: transparent;
|
|
1698
|
+
}
|
|
1699
|
+
|
|
1700
|
+
.hx-data-table-expander::before {
|
|
1701
|
+
display: inline-block;
|
|
1702
|
+
flex: none;
|
|
1703
|
+
width: 1em;
|
|
1704
|
+
height: 1em;
|
|
1705
|
+
background: currentcolor;
|
|
1706
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1707
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
1708
|
+
content: "";
|
|
1709
|
+
transition: transform 0.15s;
|
|
1710
|
+
}
|
|
1711
|
+
|
|
1712
|
+
.hx-data-table-expander-open::before {
|
|
1713
|
+
transform: rotate(90deg);
|
|
1714
|
+
}
|
|
1715
|
+
|
|
1716
|
+
.hx-data-table-expander:hover {
|
|
1717
|
+
background: var(--h-datatable-row-toggle-button-hover-background);
|
|
1718
|
+
color: var(--h-datatable-row-toggle-button-hover-color);
|
|
1719
|
+
}
|
|
1720
|
+
|
|
1721
|
+
.hx-data-table-expander:focus-visible {
|
|
1722
|
+
outline: var(--h-datatable-row-toggle-button-focus-ring-width) var(--h-datatable-row-toggle-button-focus-ring-style) var(--h-datatable-row-toggle-button-focus-ring-color);
|
|
1723
|
+
outline-offset: var(--h-datatable-row-toggle-button-focus-ring-offset);
|
|
1724
|
+
box-shadow: var(--h-datatable-row-toggle-button-focus-ring-shadow);
|
|
1725
|
+
}
|
|
1726
|
+
|
|
1727
|
+
.hx-table tbody tr.hx-data-table-expansion > td {
|
|
1728
|
+
background: var(--h-datatable-row-background);
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1732
|
+
.hx-data-table-expander::before {
|
|
1733
|
+
transition: none;
|
|
1734
|
+
}
|
|
1735
|
+
}
|
|
1736
|
+
|
|
1520
1737
|
/* date-picker */
|
|
1521
1738
|
/*
|
|
1522
1739
|
* DatePicker: `<hx-date-picker>`. The calendar panel from the `--h-datepicker-*` tokens: a header with the
|
|
@@ -3937,6 +4154,127 @@
|
|
|
3937
4154
|
border-color: var(--h-inputtext-focus-border-color);
|
|
3938
4155
|
}
|
|
3939
4156
|
|
|
4157
|
+
/* paginator */
|
|
4158
|
+
/*
|
|
4159
|
+
* Paginator: `<hx-paginator>`, from the `--h-paginator-*` tokens. Page buttons are round, the current page is
|
|
4160
|
+
* highlighted; the first/previous/next/last icons are masks that follow the text colour.
|
|
4161
|
+
*/
|
|
4162
|
+
.hx-paginator {
|
|
4163
|
+
display: block;
|
|
4164
|
+
padding: var(--h-paginator-padding);
|
|
4165
|
+
border-radius: var(--h-paginator-border-radius);
|
|
4166
|
+
background: var(--h-paginator-background);
|
|
4167
|
+
color: var(--h-paginator-color);
|
|
4168
|
+
}
|
|
4169
|
+
|
|
4170
|
+
.hx-paginator-nav {
|
|
4171
|
+
display: flex;
|
|
4172
|
+
flex-wrap: wrap;
|
|
4173
|
+
align-items: center;
|
|
4174
|
+
justify-content: center;
|
|
4175
|
+
gap: var(--h-paginator-gap);
|
|
4176
|
+
}
|
|
4177
|
+
|
|
4178
|
+
.hx-paginator-pages {
|
|
4179
|
+
display: inline-flex;
|
|
4180
|
+
align-items: center;
|
|
4181
|
+
gap: var(--h-paginator-gap);
|
|
4182
|
+
}
|
|
4183
|
+
|
|
4184
|
+
.hx-paginator-report {
|
|
4185
|
+
margin-inline-end: auto;
|
|
4186
|
+
color: var(--h-paginator-current-page-report-color);
|
|
4187
|
+
}
|
|
4188
|
+
|
|
4189
|
+
.hx-paginator-rows {
|
|
4190
|
+
margin-inline-start: auto;
|
|
4191
|
+
}
|
|
4192
|
+
|
|
4193
|
+
.hx-paginator-button {
|
|
4194
|
+
display: inline-flex;
|
|
4195
|
+
align-items: center;
|
|
4196
|
+
justify-content: center;
|
|
4197
|
+
min-width: var(--h-paginator-nav-button-width);
|
|
4198
|
+
height: var(--h-paginator-nav-button-height);
|
|
4199
|
+
padding: 0;
|
|
4200
|
+
border: 0;
|
|
4201
|
+
border-radius: var(--h-paginator-nav-button-border-radius);
|
|
4202
|
+
background: var(--h-paginator-nav-button-background);
|
|
4203
|
+
color: var(--h-paginator-nav-button-color);
|
|
4204
|
+
font: inherit;
|
|
4205
|
+
cursor: pointer;
|
|
4206
|
+
outline-color: transparent;
|
|
4207
|
+
transition: background var(--h-paginator-transition-duration), color var(--h-paginator-transition-duration), outline-color var(--h-paginator-transition-duration);
|
|
4208
|
+
}
|
|
4209
|
+
|
|
4210
|
+
.hx-paginator-button:hover:not(:disabled) {
|
|
4211
|
+
background: var(--h-paginator-nav-button-hover-background);
|
|
4212
|
+
color: var(--h-paginator-nav-button-hover-color);
|
|
4213
|
+
}
|
|
4214
|
+
|
|
4215
|
+
.hx-paginator-button:focus-visible {
|
|
4216
|
+
outline: var(--h-paginator-nav-button-focus-ring-width) var(--h-paginator-nav-button-focus-ring-style) var(--h-paginator-nav-button-focus-ring-color);
|
|
4217
|
+
outline-offset: var(--h-paginator-nav-button-focus-ring-offset);
|
|
4218
|
+
box-shadow: var(--h-paginator-nav-button-focus-ring-shadow);
|
|
4219
|
+
}
|
|
4220
|
+
|
|
4221
|
+
.hx-paginator-button:disabled {
|
|
4222
|
+
opacity: 0.5;
|
|
4223
|
+
cursor: default;
|
|
4224
|
+
}
|
|
4225
|
+
|
|
4226
|
+
.hx-paginator-page-current,
|
|
4227
|
+
.hx-paginator-page-current:hover:not(:disabled) {
|
|
4228
|
+
background: var(--h-paginator-nav-button-selected-background);
|
|
4229
|
+
color: var(--h-paginator-nav-button-selected-color);
|
|
4230
|
+
}
|
|
4231
|
+
|
|
4232
|
+
.hx-paginator-first::before {
|
|
4233
|
+
display: inline-block;
|
|
4234
|
+
flex: none;
|
|
4235
|
+
width: 1.1em;
|
|
4236
|
+
height: 1.1em;
|
|
4237
|
+
background: currentcolor;
|
|
4238
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4239
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5M18 17l-5-5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4240
|
+
}
|
|
4241
|
+
|
|
4242
|
+
.hx-paginator-prev::before {
|
|
4243
|
+
display: inline-block;
|
|
4244
|
+
flex: none;
|
|
4245
|
+
width: 1.1em;
|
|
4246
|
+
height: 1.1em;
|
|
4247
|
+
background: currentcolor;
|
|
4248
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4249
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4250
|
+
}
|
|
4251
|
+
|
|
4252
|
+
.hx-paginator-next::before {
|
|
4253
|
+
display: inline-block;
|
|
4254
|
+
flex: none;
|
|
4255
|
+
width: 1.1em;
|
|
4256
|
+
height: 1.1em;
|
|
4257
|
+
background: currentcolor;
|
|
4258
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4259
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4260
|
+
}
|
|
4261
|
+
|
|
4262
|
+
.hx-paginator-last::before {
|
|
4263
|
+
display: inline-block;
|
|
4264
|
+
flex: none;
|
|
4265
|
+
width: 1.1em;
|
|
4266
|
+
height: 1.1em;
|
|
4267
|
+
background: currentcolor;
|
|
4268
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17 5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4269
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 17 5-5-5-5M6 17l5-5-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
|
|
4270
|
+
}
|
|
4271
|
+
|
|
4272
|
+
@media (prefers-reduced-motion: reduce) {
|
|
4273
|
+
.hx-paginator-button {
|
|
4274
|
+
transition: none;
|
|
4275
|
+
}
|
|
4276
|
+
}
|
|
4277
|
+
|
|
3940
4278
|
/* panel */
|
|
3941
4279
|
/*
|
|
3942
4280
|
* Panel: `<hx-panel>`. A bordered container from the `--h-panel-*` tokens with a header (title, actions, the
|
package/tokens.css
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
:root,:host{--h-chip-remove-icon-size:1rem;--h-chip-remove-icon-focus-ring-width:var(--h-focus-ring-width);--h-chip-remove-icon-focus-ring-style:var(--h-focus-ring-style);--h-chip-remove-icon-focus-ring-color:var(--h-focus-ring-color);--h-chip-remove-icon-focus-ring-offset:var(--h-focus-ring-offset);--h-chip-remove-icon-focus-ring-shadow:var(--h-form-field-focus-ring-shadow);--h-chip-icon-size:1rem;--h-chip-image-width:2rem;--h-chip-image-height:2rem;--h-chip-border-radius:16px;--h-chip-padding-x:0.75rem;--h-chip-padding-y:0.5rem;--h-chip-gap:0.5rem;--h-chip-transition-duration:var(--h-transition-duration);--h-chip-remove-icon-color:var(--h-surface-800);--h-chip-icon-color:var(--h-surface-800);--h-chip-background:var(--h-surface-100);--h-chip-color:var(--h-surface-800);}.app-dark{--h-chip-remove-icon-color:var(--h-surface-0);--h-chip-icon-color:var(--h-surface-0);--h-chip-background:var(--h-surface-800);--h-chip-color:var(--h-surface-0);}
|
|
16
16
|
:root,:host{--h-confirmdialog-content-gap:1rem;--h-confirmdialog-icon-size:2rem;--h-confirmdialog-icon-color:var(--h-overlay-modal-color);}
|
|
17
17
|
:root,:host{--h-confirmpopup-footer-gap:0.5rem;--h-confirmpopup-footer-padding:0 var(--h-overlay-popover-padding) var(--h-overlay-popover-padding) var(--h-overlay-popover-padding);--h-confirmpopup-icon-size:1.5rem;--h-confirmpopup-icon-color:var(--h-overlay-popover-color);--h-confirmpopup-content-padding:var(--h-overlay-popover-padding);--h-confirmpopup-content-gap:1rem;--h-confirmpopup-background:var(--h-overlay-popover-background);--h-confirmpopup-border-color:var(--h-overlay-popover-border-color);--h-confirmpopup-color:var(--h-overlay-popover-color);--h-confirmpopup-border-radius:var(--h-overlay-popover-border-radius);--h-confirmpopup-shadow:var(--h-overlay-popover-shadow);--h-confirmpopup-gutter:10px;--h-confirmpopup-arrow-offset:1.25rem;}
|
|
18
|
+
:root,:host{--h-datatable-paginator-bottom-border-color:var(--h-datatable-border-color);--h-datatable-paginator-bottom-border-width:0 0 1px 0;--h-datatable-paginator-top-border-color:var(--h-datatable-border-color);--h-datatable-paginator-top-border-width:0 0 1px 0;--h-datatable-filter-inline-gap:0.5rem;--h-datatable-filter-constraint-focus-background:var(--h-list-option-focus-background);--h-datatable-filter-constraint-selected-background:var(--h-list-option-selected-background);--h-datatable-filter-constraint-selected-focus-background:var(--h-list-option-selected-focus-background);--h-datatable-filter-constraint-color:var(--h-list-option-color);--h-datatable-filter-constraint-focus-color:var(--h-list-option-focus-color);--h-datatable-filter-constraint-selected-color:var(--h-list-option-selected-color);--h-datatable-filter-constraint-selected-focus-color:var(--h-list-option-selected-focus-color);--h-datatable-filter-constraint-padding:var(--h-list-option-padding);--h-datatable-filter-constraint-border-radius:var(--h-list-option-border-radius);--h-datatable-filter-constraint-separator-border-color:var(--h-content-border-color);--h-datatable-filter-constraint-list-padding:var(--h-list-padding);--h-datatable-filter-constraint-list-gap:var(--h-list-gap);--h-datatable-filter-rule-border-color:var(--h-content-border-color);--h-datatable-filter-overlay-popover-background:var(--h-overlay-popover-background);--h-datatable-filter-overlay-popover-border-color:var(--h-overlay-popover-border-color);--h-datatable-filter-overlay-popover-border-radius:var(--h-overlay-popover-border-radius);--h-datatable-filter-overlay-popover-color:var(--h-overlay-popover-color);--h-datatable-filter-overlay-popover-shadow:var(--h-overlay-popover-shadow);--h-datatable-filter-overlay-popover-padding:var(--h-overlay-popover-padding);--h-datatable-filter-overlay-popover-gap:0.5rem;--h-datatable-filter-overlay-select-background:var(--h-overlay-select-background);--h-datatable-filter-overlay-select-border-color:var(--h-overlay-select-border-color);--h-datatable-filter-overlay-select-border-radius:var(--h-overlay-select-border-radius);--h-datatable-filter-overlay-select-color:var(--h-overlay-select-color);--h-datatable-filter-overlay-select-shadow:var(--h-overlay-select-shadow);--h-datatable-row-toggle-button-hover-background:var(--h-content-hover-background);--h-datatable-row-toggle-button-selected-hover-background:var(--h-content-background);--h-datatable-row-toggle-button-color:var(--h-text-muted-color);--h-datatable-row-toggle-button-hover-color:var(--h-text-color);--h-datatable-row-toggle-button-selected-hover-color:var(--h-primary-color);--h-datatable-row-toggle-button-size:1.75rem;--h-datatable-row-toggle-button-border-radius:50%;--h-datatable-row-toggle-button-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-toggle-button-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-toggle-button-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-toggle-button-focus-ring-offset:var(--h-focus-ring-offset);--h-datatable-row-toggle-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-loading-icon-size:2rem;--h-datatable-sort-icon-color:var(--h-text-muted-color);--h-datatable-sort-icon-hover-color:var(--h-text-hover-muted-color);--h-datatable-sort-icon-size:0.875rem;--h-datatable-resize-indicator-width:1px;--h-datatable-resize-indicator-color:var(--h-primary-color);--h-datatable-column-resizer-width:0.5rem;--h-datatable-drop-point-color:var(--h-primary-color);--h-datatable-footer-background:var(--h-content-background);--h-datatable-footer-border-color:var(--h-datatable-border-color);--h-datatable-footer-color:var(--h-content-color);--h-datatable-footer-border-width:0 0 1px 0;--h-datatable-footer-padding:0.75rem 1rem;--h-datatable-footer-lg-padding:1rem 1.25rem;--h-datatable-footer-sm-padding:0.375rem 0.5rem;--h-datatable-column-footer-font-weight:600;--h-datatable-footer-cell-background:var(--h-content-background);--h-datatable-footer-cell-border-color:var(--h-datatable-border-color);--h-datatable-footer-cell-color:var(--h-content-color);--h-datatable-footer-cell-padding:0.75rem 1rem;--h-datatable-footer-cell-lg-padding:1rem 1.25rem;--h-datatable-footer-cell-sm-padding:0.375rem 0.5rem;--h-datatable-body-cell-border-color:var(--h-datatable-border-color);--h-datatable-body-cell-padding:0.75rem 1rem;--h-datatable-body-cell-lg-padding:1rem 1.25rem;--h-datatable-body-cell-sm-padding:0.375rem 0.5rem;--h-datatable-row-background:var(--h-content-background);--h-datatable-row-hover-background:var(--h-content-hover-background);--h-datatable-row-selected-background:var(--h-highlight-background);--h-datatable-row-color:var(--h-content-color);--h-datatable-row-hover-color:var(--h-content-hover-color);--h-datatable-row-selected-color:var(--h-highlight-color);--h-datatable-row-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-focus-ring-offset:-1px;--h-datatable-row-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-column-title-font-weight:600;--h-datatable-header-cell-background:var(--h-content-background);--h-datatable-header-cell-hover-background:var(--h-content-hover-background);--h-datatable-header-cell-selected-background:var(--h-highlight-background);--h-datatable-header-cell-border-color:var(--h-datatable-border-color);--h-datatable-header-cell-color:var(--h-content-color);--h-datatable-header-cell-hover-color:var(--h-content-hover-color);--h-datatable-header-cell-selected-color:var(--h-highlight-color);--h-datatable-header-cell-gap:0.5rem;--h-datatable-header-cell-padding:0.75rem 1rem;--h-datatable-header-cell-lg-padding:1rem 1.25rem;--h-datatable-header-cell-sm-padding:0.375rem 0.5rem;--h-datatable-header-cell-focus-ring-width:var(--h-focus-ring-width);--h-datatable-header-cell-focus-ring-style:var(--h-focus-ring-style);--h-datatable-header-cell-focus-ring-color:var(--h-focus-ring-color);--h-datatable-header-cell-focus-ring-offset:-1px;--h-datatable-header-cell-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-header-background:var(--h-content-background);--h-datatable-header-border-color:var(--h-datatable-border-color);--h-datatable-header-color:var(--h-content-color);--h-datatable-header-border-width:0 0 1px 0;--h-datatable-header-padding:0.75rem 1rem;--h-datatable-header-lg-padding:1rem 1.25rem;--h-datatable-header-sm-padding:0.375rem 0.5rem;--h-datatable-transition-duration:var(--h-transition-duration);--h-datatable-body-cell-selected-border-color:var(--h-primary-100);--h-datatable-row-striped-background:var(--h-surface-50);--h-datatable-border-color:var(--h-content-border-color);}.app-dark{--h-datatable-body-cell-selected-border-color:var(--h-primary-900);--h-datatable-row-striped-background:var(--h-surface-950);--h-datatable-border-color:var(--h-surface-800);}
|
|
18
19
|
:root,:host{--h-datepicker-time-picker-padding:0.5rem 0 0 0;--h-datepicker-time-picker-border-color:var(--h-content-border-color);--h-datepicker-time-picker-gap:0.5rem;--h-datepicker-time-picker-button-gap:0.25rem;--h-datepicker-buttonbar-padding:0.5rem 0 0 0;--h-datepicker-buttonbar-border-color:var(--h-content-border-color);--h-datepicker-year-padding:0.375rem;--h-datepicker-year-border-radius:var(--h-content-border-radius);--h-datepicker-year-view-margin:0.5rem 0 0 0;--h-datepicker-month-padding:0.375rem;--h-datepicker-month-border-radius:var(--h-content-border-radius);--h-datepicker-month-view-margin:0.5rem 0 0 0;--h-datepicker-date-hover-background:var(--h-content-hover-background);--h-datepicker-date-selected-background:var(--h-primary-color);--h-datepicker-date-range-selected-background:var(--h-highlight-background);--h-datepicker-date-color:var(--h-content-color);--h-datepicker-date-hover-color:var(--h-content-hover-color);--h-datepicker-date-selected-color:var(--h-primary-contrast-color);--h-datepicker-date-range-selected-color:var(--h-highlight-color);--h-datepicker-date-width:2rem;--h-datepicker-date-height:2rem;--h-datepicker-date-border-radius:50%;--h-datepicker-date-padding:0.25rem;--h-datepicker-date-focus-ring-width:var(--h-focus-ring-width);--h-datepicker-date-focus-ring-style:var(--h-focus-ring-style);--h-datepicker-date-focus-ring-color:var(--h-focus-ring-color);--h-datepicker-date-focus-ring-offset:var(--h-focus-ring-offset);--h-datepicker-date-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datepicker-week-day-padding:0.25rem;--h-datepicker-week-day-font-weight:500;--h-datepicker-week-day-color:var(--h-content-color);--h-datepicker-day-view-margin:0.5rem 0 0 0;--h-datepicker-group-border-color:var(--h-content-border-color);--h-datepicker-group-gap:var(--h-overlay-popover-padding);--h-datepicker-select-year-hover-background:var(--h-content-hover-background);--h-datepicker-select-year-color:var(--h-content-color);--h-datepicker-select-year-hover-color:var(--h-content-hover-color);--h-datepicker-select-year-padding:0.25rem 0.5rem;--h-datepicker-select-year-border-radius:var(--h-content-border-radius);--h-datepicker-select-month-hover-background:var(--h-content-hover-background);--h-datepicker-select-month-color:var(--h-content-color);--h-datepicker-select-month-hover-color:var(--h-content-hover-color);--h-datepicker-select-month-padding:0.25rem 0.5rem;--h-datepicker-select-month-border-radius:var(--h-content-border-radius);--h-datepicker-input-icon-color:var(--h-form-field-icon-color);--h-datepicker-dropdown-width:2.5rem;--h-datepicker-dropdown-border-color:var(--h-form-field-border-color);--h-datepicker-dropdown-hover-border-color:var(--h-form-field-border-color);--h-datepicker-dropdown-active-border-color:var(--h-form-field-border-color);--h-datepicker-dropdown-border-radius:var(--h-form-field-border-radius);--h-datepicker-dropdown-focus-ring-width:var(--h-focus-ring-width);--h-datepicker-dropdown-focus-ring-style:var(--h-focus-ring-style);--h-datepicker-dropdown-focus-ring-color:var(--h-focus-ring-color);--h-datepicker-dropdown-focus-ring-offset:var(--h-focus-ring-offset);--h-datepicker-dropdown-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datepicker-dropdown-lg-width:3rem;--h-datepicker-dropdown-sm-width:2rem;--h-datepicker-title-gap:0.5rem;--h-datepicker-title-font-weight:500;--h-datepicker-header-background:var(--h-content-background);--h-datepicker-header-border-color:var(--h-content-border-color);--h-datepicker-header-color:var(--h-content-color);--h-datepicker-header-padding:0 0 0.5rem 0;--h-datepicker-panel-background:var(--h-content-background);--h-datepicker-panel-border-color:var(--h-content-border-color);--h-datepicker-panel-color:var(--h-content-color);--h-datepicker-panel-border-radius:var(--h-content-border-radius);--h-datepicker-panel-shadow:var(--h-overlay-popover-shadow);--h-datepicker-panel-padding:var(--h-overlay-popover-padding);--h-datepicker-transition-duration:var(--h-transition-duration);--h-datepicker-today-background:var(--h-surface-200);--h-datepicker-today-color:var(--h-surface-900);--h-datepicker-dropdown-background:var(--h-surface-100);--h-datepicker-dropdown-hover-background:var(--h-surface-200);--h-datepicker-dropdown-active-background:var(--h-surface-300);--h-datepicker-dropdown-color:var(--h-surface-600);--h-datepicker-dropdown-hover-color:var(--h-surface-700);--h-datepicker-dropdown-active-color:var(--h-surface-800);}.app-dark{--h-datepicker-today-background:var(--h-surface-700);--h-datepicker-today-color:var(--h-surface-0);--h-datepicker-dropdown-background:var(--h-surface-800);--h-datepicker-dropdown-hover-background:var(--h-surface-700);--h-datepicker-dropdown-active-background:var(--h-surface-600);--h-datepicker-dropdown-color:var(--h-surface-300);--h-datepicker-dropdown-hover-color:var(--h-surface-200);--h-datepicker-dropdown-active-color:var(--h-surface-100);}
|
|
19
20
|
:root,:host{--h-dialog-footer-padding:0 var(--h-overlay-modal-padding) var(--h-overlay-modal-padding) var(--h-overlay-modal-padding);--h-dialog-footer-gap:0.5rem;--h-dialog-content-padding:0 var(--h-overlay-modal-padding) var(--h-overlay-modal-padding) var(--h-overlay-modal-padding);--h-dialog-title-font-size:1.25rem;--h-dialog-title-font-weight:600;--h-dialog-header-padding:var(--h-overlay-modal-padding);--h-dialog-header-gap:0.5rem;--h-dialog-background:var(--h-overlay-modal-background);--h-dialog-border-color:var(--h-overlay-modal-border-color);--h-dialog-color:var(--h-overlay-modal-color);--h-dialog-border-radius:var(--h-overlay-modal-border-radius);--h-dialog-shadow:var(--h-overlay-modal-shadow);}
|
|
20
21
|
:root,:host{--h-divider-vertical-margin:0 1rem;--h-divider-vertical-padding:0.5rem 0;--h-divider-vertical-content-padding:0.5rem 0;--h-divider-horizontal-margin:1rem 0;--h-divider-horizontal-padding:0 1rem;--h-divider-horizontal-content-padding:0 0.5rem;--h-divider-content-background:var(--h-content-background);--h-divider-content-color:var(--h-text-color);--h-divider-border-color:var(--h-content-border-color);}
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
:root,:host{--h-menubar-mobile-button-border-radius:50%;--h-menubar-mobile-button-size:1.75rem;--h-menubar-mobile-button-color:var(--h-text-muted-color);--h-menubar-mobile-button-hover-color:var(--h-text-hover-muted-color);--h-menubar-mobile-button-hover-background:var(--h-content-hover-background);--h-menubar-mobile-button-focus-ring-width:var(--h-focus-ring-width);--h-menubar-mobile-button-focus-ring-style:var(--h-focus-ring-style);--h-menubar-mobile-button-focus-ring-color:var(--h-focus-ring-color);--h-menubar-mobile-button-focus-ring-offset:var(--h-focus-ring-offset);--h-menubar-mobile-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-menubar-separator-border-color:var(--h-content-border-color);--h-menubar-submenu-padding:var(--h-navigation-list-padding);--h-menubar-submenu-gap:var(--h-navigation-list-gap);--h-menubar-submenu-background:var(--h-content-background);--h-menubar-submenu-border-color:var(--h-content-border-color);--h-menubar-submenu-border-radius:var(--h-content-border-radius);--h-menubar-submenu-shadow:var(--h-overlay-navigation-shadow);--h-menubar-submenu-mobile-indent:1rem;--h-menubar-submenu-icon-size:var(--h-navigation-submenu-icon-size);--h-menubar-submenu-icon-color:var(--h-navigation-submenu-icon-color);--h-menubar-submenu-icon-focus-color:var(--h-navigation-submenu-icon-focus-color);--h-menubar-submenu-icon-active-color:var(--h-navigation-submenu-icon-active-color);--h-menubar-item-focus-background:var(--h-navigation-item-focus-background);--h-menubar-item-active-background:var(--h-navigation-item-active-background);--h-menubar-item-color:var(--h-navigation-item-color);--h-menubar-item-focus-color:var(--h-navigation-item-focus-color);--h-menubar-item-active-color:var(--h-navigation-item-active-color);--h-menubar-item-padding:var(--h-navigation-item-padding);--h-menubar-item-border-radius:var(--h-navigation-item-border-radius);--h-menubar-item-gap:var(--h-navigation-item-gap);--h-menubar-item-icon-color:var(--h-navigation-item-icon-color);--h-menubar-item-icon-focus-color:var(--h-navigation-item-icon-focus-color);--h-menubar-item-icon-active-color:var(--h-navigation-item-icon-active-color);--h-menubar-base-item-border-radius:var(--h-content-border-radius);--h-menubar-base-item-padding:var(--h-navigation-item-padding);--h-menubar-background:var(--h-content-background);--h-menubar-border-color:var(--h-content-border-color);--h-menubar-border-radius:var(--h-content-border-radius);--h-menubar-color:var(--h-content-color);--h-menubar-gap:0.5rem;--h-menubar-padding:0.5rem 0.75rem;--h-menubar-transition-duration:var(--h-transition-duration);}
|
|
33
34
|
:root,:host{--h-message-simple-content-padding:0;--h-message-outlined-border-width:1px;--h-message-close-icon-size:1rem;--h-message-close-icon-lg-size:1.125rem;--h-message-close-icon-sm-size:0.875rem;--h-message-close-button-width:1.75rem;--h-message-close-button-height:1.75rem;--h-message-close-button-border-radius:50%;--h-message-close-button-focus-ring-width:var(--h-focus-ring-width);--h-message-close-button-focus-ring-style:var(--h-focus-ring-style);--h-message-close-button-focus-ring-offset:var(--h-focus-ring-offset);--h-message-icon-size:1.125rem;--h-message-icon-lg-size:1.25rem;--h-message-icon-sm-size:1rem;--h-message-text-font-size:1rem;--h-message-text-font-weight:500;--h-message-text-lg-font-size:1.125rem;--h-message-text-sm-font-size:0.875rem;--h-message-content-padding:0.5rem 0.75rem;--h-message-content-gap:0.5rem;--h-message-content-lg-padding:0.625rem 0.875rem;--h-message-content-sm-padding:0.375rem 0.625rem;--h-message-border-radius:var(--h-content-border-radius);--h-message-border-width:1px;--h-message-transition-duration:var(--h-transition-duration);--h-message-contrast-background:var(--h-surface-900);--h-message-contrast-border-color:var(--h-surface-950);--h-message-contrast-color:var(--h-surface-50);--h-message-contrast-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-950), transparent 96%);--h-message-contrast-simple-color:var(--h-surface-950);--h-message-contrast-outlined-color:var(--h-surface-950);--h-message-contrast-outlined-border-color:var(--h-surface-950);--h-message-contrast-close-button-hover-background:var(--h-surface-800);--h-message-contrast-close-button-focus-ring-color:var(--h-surface-50);--h-message-contrast-close-button-focus-ring-shadow:none;--h-message-secondary-background:var(--h-surface-100);--h-message-secondary-border-color:var(--h-surface-200);--h-message-secondary-color:var(--h-surface-600);--h-message-secondary-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-500), transparent 96%);--h-message-secondary-simple-color:var(--h-surface-500);--h-message-secondary-outlined-color:var(--h-surface-500);--h-message-secondary-outlined-border-color:var(--h-surface-500);--h-message-secondary-close-button-hover-background:var(--h-surface-200);--h-message-secondary-close-button-focus-ring-color:var(--h-surface-600);--h-message-secondary-close-button-focus-ring-shadow:none;--h-message-error-background:color-mix(in srgb, var(--h-red-50), transparent 5%);--h-message-error-border-color:var(--h-red-200);--h-message-error-color:var(--h-red-600);--h-message-error-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-red-500), transparent 96%);--h-message-error-simple-color:var(--h-red-600);--h-message-error-outlined-color:var(--h-red-600);--h-message-error-outlined-border-color:var(--h-red-600);--h-message-error-close-button-hover-background:var(--h-red-100);--h-message-error-close-button-focus-ring-color:var(--h-red-600);--h-message-error-close-button-focus-ring-shadow:none;--h-message-warn-background:color-mix(in srgb,var(--h-yellow-50), transparent 5%);--h-message-warn-border-color:var(--h-yellow-200);--h-message-warn-color:var(--h-yellow-600);--h-message-warn-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-yellow-500), transparent 96%);--h-message-warn-simple-color:var(--h-yellow-600);--h-message-warn-outlined-color:var(--h-yellow-600);--h-message-warn-outlined-border-color:var(--h-yellow-600);--h-message-warn-close-button-hover-background:var(--h-yellow-100);--h-message-warn-close-button-focus-ring-color:var(--h-yellow-600);--h-message-warn-close-button-focus-ring-shadow:none;--h-message-success-background:color-mix(in srgb, var(--h-green-50), transparent 5%);--h-message-success-border-color:var(--h-green-200);--h-message-success-color:var(--h-green-600);--h-message-success-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-green-500), transparent 96%);--h-message-success-simple-color:var(--h-green-600);--h-message-success-outlined-color:var(--h-green-600);--h-message-success-outlined-border-color:var(--h-green-600);--h-message-success-close-button-hover-background:var(--h-green-100);--h-message-success-close-button-focus-ring-color:var(--h-green-600);--h-message-success-close-button-focus-ring-shadow:none;--h-message-info-background:color-mix(in srgb, var(--h-blue-50), transparent 5%);--h-message-info-border-color:var(--h-blue-200);--h-message-info-color:var(--h-blue-600);--h-message-info-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-blue-500), transparent 96%);--h-message-info-simple-color:var(--h-blue-600);--h-message-info-outlined-color:var(--h-blue-600);--h-message-info-outlined-border-color:var(--h-blue-600);--h-message-info-close-button-hover-background:var(--h-blue-100);--h-message-info-close-button-focus-ring-color:var(--h-blue-600);--h-message-info-close-button-focus-ring-shadow:none;}.app-dark{--h-message-contrast-background:var(--h-surface-0);--h-message-contrast-border-color:var(--h-surface-100);--h-message-contrast-color:var(--h-surface-950);--h-message-contrast-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-950), transparent 96%);--h-message-contrast-simple-color:var(--h-surface-0);--h-message-contrast-outlined-color:var(--h-surface-0);--h-message-contrast-outlined-border-color:var(--h-surface-0);--h-message-contrast-close-button-hover-background:var(--h-surface-100);--h-message-contrast-close-button-focus-ring-color:var(--h-surface-950);--h-message-contrast-close-button-focus-ring-shadow:none;--h-message-secondary-background:var(--h-surface-800);--h-message-secondary-border-color:var(--h-surface-700);--h-message-secondary-color:var(--h-surface-300);--h-message-secondary-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-surface-500), transparent 96%);--h-message-secondary-simple-color:var(--h-surface-400);--h-message-secondary-outlined-color:var(--h-surface-400);--h-message-secondary-outlined-border-color:var(--h-surface-400);--h-message-secondary-close-button-hover-background:var(--h-surface-700);--h-message-secondary-close-button-focus-ring-color:var(--h-surface-300);--h-message-secondary-close-button-focus-ring-shadow:none;--h-message-error-background:color-mix(in srgb, var(--h-red-500), transparent 84%);--h-message-error-border-color:color-mix(in srgb, var(--h-red-700), transparent 64%);--h-message-error-color:var(--h-red-500);--h-message-error-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-red-500), transparent 96%);--h-message-error-simple-color:var(--h-red-500);--h-message-error-outlined-color:var(--h-red-500);--h-message-error-outlined-border-color:var(--h-red-500);--h-message-error-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-error-close-button-focus-ring-color:var(--h-red-500);--h-message-error-close-button-focus-ring-shadow:none;--h-message-warn-background:color-mix(in srgb, var(--h-yellow-500), transparent 84%);--h-message-warn-border-color:color-mix(in srgb, var(--h-yellow-700), transparent 64%);--h-message-warn-color:var(--h-yellow-500);--h-message-warn-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-yellow-500), transparent 96%);--h-message-warn-simple-color:var(--h-yellow-500);--h-message-warn-outlined-color:var(--h-yellow-500);--h-message-warn-outlined-border-color:var(--h-yellow-500);--h-message-warn-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-warn-close-button-focus-ring-color:var(--h-yellow-500);--h-message-warn-close-button-focus-ring-shadow:none;--h-message-success-background:color-mix(in srgb, var(--h-green-500), transparent 84%);--h-message-success-border-color:color-mix(in srgb, var(--h-green-700), transparent 64%);--h-message-success-color:var(--h-green-500);--h-message-success-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-green-500), transparent 96%);--h-message-success-simple-color:var(--h-green-500);--h-message-success-outlined-color:var(--h-green-500);--h-message-success-outlined-border-color:var(--h-green-500);--h-message-success-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-success-close-button-focus-ring-color:var(--h-green-500);--h-message-success-close-button-focus-ring-shadow:none;--h-message-info-background:color-mix(in srgb, var(--h-blue-500), transparent 84%);--h-message-info-border-color:color-mix(in srgb, var(--h-blue-700), transparent 64%);--h-message-info-color:var(--h-blue-500);--h-message-info-shadow:0px 4px 8px 0px color-mix(in srgb, var(--h-blue-500), transparent 96%);--h-message-info-simple-color:var(--h-blue-500);--h-message-info-outlined-color:var(--h-blue-500);--h-message-info-outlined-border-color:var(--h-blue-500);--h-message-info-close-button-hover-background:rgba(255, 255, 255, 0.05);--h-message-info-close-button-focus-ring-color:var(--h-blue-500);--h-message-info-close-button-focus-ring-shadow:none;}
|
|
34
35
|
:root,:host{--h-multiselect-empty-message-padding:var(--h-list-option-padding);--h-multiselect-clear-icon-color:var(--h-form-field-icon-color);--h-multiselect-chip-border-radius:var(--h-border-radius-sm);--h-multiselect-option-group-background:var(--h-list-option-group-background);--h-multiselect-option-group-color:var(--h-list-option-group-color);--h-multiselect-option-group-font-weight:var(--h-list-option-group-font-weight);--h-multiselect-option-group-padding:var(--h-list-option-group-padding);--h-multiselect-option-focus-background:var(--h-list-option-focus-background);--h-multiselect-option-selected-background:var(--h-list-option-selected-background);--h-multiselect-option-selected-focus-background:var(--h-list-option-selected-focus-background);--h-multiselect-option-color:var(--h-list-option-color);--h-multiselect-option-focus-color:var(--h-list-option-focus-color);--h-multiselect-option-selected-color:var(--h-list-option-selected-color);--h-multiselect-option-selected-focus-color:var(--h-list-option-selected-focus-color);--h-multiselect-option-padding:var(--h-list-option-padding);--h-multiselect-option-border-radius:var(--h-list-option-border-radius);--h-multiselect-option-gap:0.5rem;--h-multiselect-list-padding:var(--h-list-padding);--h-multiselect-list-gap:var(--h-list-gap);--h-multiselect-list-header-padding:var(--h-list-header-padding);--h-multiselect-overlay-background:var(--h-overlay-select-background);--h-multiselect-overlay-border-color:var(--h-overlay-select-border-color);--h-multiselect-overlay-border-radius:var(--h-overlay-select-border-radius);--h-multiselect-overlay-color:var(--h-overlay-select-color);--h-multiselect-overlay-shadow:var(--h-overlay-select-shadow);--h-multiselect-dropdown-width:2.5rem;--h-multiselect-dropdown-color:var(--h-form-field-icon-color);--h-multiselect-background:var(--h-form-field-background);--h-multiselect-disabled-background:var(--h-form-field-disabled-background);--h-multiselect-filled-background:var(--h-form-field-filled-background);--h-multiselect-filled-hover-background:var(--h-form-field-filled-hover-background);--h-multiselect-filled-focus-background:var(--h-form-field-filled-focus-background);--h-multiselect-border-color:var(--h-form-field-border-color);--h-multiselect-hover-border-color:var(--h-form-field-hover-border-color);--h-multiselect-focus-border-color:var(--h-form-field-focus-border-color);--h-multiselect-invalid-border-color:var(--h-form-field-invalid-border-color);--h-multiselect-color:var(--h-form-field-color);--h-multiselect-disabled-color:var(--h-form-field-disabled-color);--h-multiselect-placeholder-color:var(--h-form-field-placeholder-color);--h-multiselect-invalid-placeholder-color:var(--h-form-field-invalid-placeholder-color);--h-multiselect-shadow:var(--h-form-field-shadow);--h-multiselect-padding-x:var(--h-form-field-padding-x);--h-multiselect-padding-y:var(--h-form-field-padding-y);--h-multiselect-border-radius:var(--h-form-field-border-radius);--h-multiselect-transition-duration:var(--h-form-field-transition-duration);--h-multiselect-lg-font-size:var(--h-form-field-lg-font-size);--h-multiselect-lg-padding-x:var(--h-form-field-lg-padding-x);--h-multiselect-lg-padding-y:var(--h-form-field-lg-padding-y);--h-multiselect-sm-font-size:var(--h-form-field-sm-font-size);--h-multiselect-sm-padding-x:var(--h-form-field-sm-padding-x);--h-multiselect-sm-padding-y:var(--h-form-field-sm-padding-y);--h-multiselect-focus-ring-width:var(--h-form-field-focus-ring-width);--h-multiselect-focus-ring-style:var(--h-form-field-focus-ring-style);--h-multiselect-focus-ring-color:var(--h-form-field-focus-ring-color);--h-multiselect-focus-ring-offset:var(--h-form-field-focus-ring-offset);--h-multiselect-focus-ring-shadow:var(--h-form-field-focus-ring-shadow);}
|
|
36
|
+
:root,:host{--h-paginator-jump-to-page-input-max-width:2.5rem;--h-paginator-current-page-report-color:var(--h-text-muted-color);--h-paginator-nav-button-background:transparent;--h-paginator-nav-button-hover-background:var(--h-content-hover-background);--h-paginator-nav-button-selected-background:var(--h-highlight-background);--h-paginator-nav-button-color:var(--h-text-muted-color);--h-paginator-nav-button-hover-color:var(--h-text-hover-muted-color);--h-paginator-nav-button-selected-color:var(--h-highlight-color);--h-paginator-nav-button-width:2.5rem;--h-paginator-nav-button-height:2.5rem;--h-paginator-nav-button-border-radius:50%;--h-paginator-nav-button-focus-ring-width:var(--h-focus-ring-width);--h-paginator-nav-button-focus-ring-style:var(--h-focus-ring-style);--h-paginator-nav-button-focus-ring-color:var(--h-focus-ring-color);--h-paginator-nav-button-focus-ring-offset:var(--h-focus-ring-offset);--h-paginator-nav-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-paginator-padding:0.5rem 1rem;--h-paginator-gap:0.25rem;--h-paginator-border-radius:var(--h-content-border-radius);--h-paginator-background:var(--h-content-background);--h-paginator-color:var(--h-content-color);--h-paginator-transition-duration:var(--h-transition-duration);}
|
|
35
37
|
:root,:host{--h-panel-footer-padding:0 1.125rem 1.125rem 1.125rem;--h-panel-content-padding:0 1.125rem 1.125rem 1.125rem;--h-panel-title-font-weight:600;--h-panel-toggleable-header-padding:0.375rem 1.125rem;--h-panel-header-background:transparent;--h-panel-header-color:var(--h-text-color);--h-panel-header-padding:1.125rem;--h-panel-header-border-color:var(--h-content-border-color);--h-panel-header-border-width:0;--h-panel-header-border-radius:0;--h-panel-background:var(--h-content-background);--h-panel-border-color:var(--h-content-border-color);--h-panel-color:var(--h-content-color);--h-panel-border-radius:var(--h-content-border-radius);}
|
|
36
38
|
:root,:host{--h-password-content-gap:0.5rem;--h-password-overlay-background:var(--h-overlay-popover-background);--h-password-overlay-border-color:var(--h-overlay-popover-border-color);--h-password-overlay-border-radius:var(--h-overlay-popover-border-radius);--h-password-overlay-color:var(--h-overlay-popover-color);--h-password-overlay-padding:var(--h-overlay-popover-padding);--h-password-overlay-shadow:var(--h-overlay-popover-shadow);--h-password-icon-color:var(--h-form-field-icon-color);--h-password-meter-background:var(--h-content-border-color);--h-password-meter-border-radius:var(--h-content-border-radius);--h-password-meter-height:.75rem;--h-password-strength-weak-background:var(--h-red-500);--h-password-strength-medium-background:var(--h-amber-500);--h-password-strength-strong-background:var(--h-green-500);}.app-dark{--h-password-strength-weak-background:var(--h-red-400);--h-password-strength-medium-background:var(--h-amber-400);--h-password-strength-strong-background:var(--h-green-400);}
|
|
37
39
|
:root,:host{--h-popover-content-padding:var(--h-overlay-popover-padding);--h-popover-background:var(--h-overlay-popover-background);--h-popover-border-color:var(--h-overlay-popover-border-color);--h-popover-color:var(--h-overlay-popover-color);--h-popover-border-radius:var(--h-overlay-popover-border-radius);--h-popover-shadow:var(--h-overlay-popover-shadow);--h-popover-gutter:10px;--h-popover-arrow-offset:1.25rem;}
|
|
@@ -47,7 +49,6 @@
|
|
|
47
49
|
:root,:host{--h-splitbutton-border-radius:var(--h-form-field-border-radius);--h-splitbutton-rounded-border-radius:2rem;--h-splitbutton-raised-shadow:0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);}
|
|
48
50
|
:root,:host{--h-stepper-steppanel-background:var(--h-content-background);--h-stepper-steppanel-color:var(--h-content-color);--h-stepper-steppanel-padding:0;--h-stepper-steppanel-indent:1rem;--h-stepper-steppanels-padding:0.875rem 0.5rem 1.125rem 0.5rem;--h-stepper-step-number-background:var(--h-content-background);--h-stepper-step-number-active-background:var(--h-content-background);--h-stepper-step-number-border-color:var(--h-content-border-color);--h-stepper-step-number-active-border-color:var(--h-content-border-color);--h-stepper-step-number-color:var(--h-text-muted-color);--h-stepper-step-number-active-color:var(--h-primary-color);--h-stepper-step-number-size:2rem;--h-stepper-step-number-font-size:1.143rem;--h-stepper-step-number-font-weight:500;--h-stepper-step-number-border-radius:50%;--h-stepper-step-number-shadow:0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);--h-stepper-step-title-color:var(--h-text-muted-color);--h-stepper-step-title-active-color:var(--h-primary-color);--h-stepper-step-title-font-weight:500;--h-stepper-step-header-padding:0;--h-stepper-step-header-border-radius:var(--h-content-border-radius);--h-stepper-step-header-gap:0.5rem;--h-stepper-step-header-focus-ring-width:var(--h-focus-ring-width);--h-stepper-step-header-focus-ring-style:var(--h-focus-ring-style);--h-stepper-step-header-focus-ring-color:var(--h-focus-ring-color);--h-stepper-step-header-focus-ring-offset:var(--h-focus-ring-offset);--h-stepper-step-header-focus-ring-shadow:var(--h-focus-ring-shadow);--h-stepper-step-padding:0.5rem;--h-stepper-step-gap:1rem;--h-stepper-separator-background:var(--h-content-border-color);--h-stepper-separator-active-background:var(--h-primary-color);--h-stepper-separator-margin:0 0 0 1.625rem;--h-stepper-separator-size:2px;--h-stepper-transition-duration:var(--h-transition-duration);}
|
|
49
51
|
:root,:host{--h-toggleswitch-handle-border-radius:50%;--h-toggleswitch-handle-size:1rem;--h-toggleswitch-width:2.5rem;--h-toggleswitch-height:1.5rem;--h-toggleswitch-border-radius:30px;--h-toggleswitch-gap:0.25rem;--h-toggleswitch-shadow:var(--h-form-field-shadow);--h-toggleswitch-border-width:1px;--h-toggleswitch-border-color:transparent;--h-toggleswitch-hover-border-color:transparent;--h-toggleswitch-checked-border-color:transparent;--h-toggleswitch-checked-hover-border-color:transparent;--h-toggleswitch-invalid-border-color:var(--h-form-field-invalid-border-color);--h-toggleswitch-transition-duration:var(--h-form-field-transition-duration);--h-toggleswitch-slide-duration:0.2s;--h-toggleswitch-focus-ring-width:var(--h-focus-ring-width);--h-toggleswitch-focus-ring-style:var(--h-focus-ring-style);--h-toggleswitch-focus-ring-color:var(--h-focus-ring-color);--h-toggleswitch-focus-ring-offset:var(--h-focus-ring-offset);--h-toggleswitch-focus-ring-shadow:var(--h-focus-ring-shadow);--h-toggleswitch-handle-background:var(--h-surface-0);--h-toggleswitch-handle-disabled-background:var(--h-form-field-disabled-color);--h-toggleswitch-handle-hover-background:var(--h-surface-0);--h-toggleswitch-handle-checked-background:var(--h-surface-0);--h-toggleswitch-handle-checked-hover-background:var(--h-surface-0);--h-toggleswitch-handle-color:var(--h-text-muted-color);--h-toggleswitch-handle-hover-color:var(--h-text-color);--h-toggleswitch-handle-checked-color:var(--h-primary-color);--h-toggleswitch-handle-checked-hover-color:var(--h-primary-hover-color);--h-toggleswitch-background:var(--h-surface-300);--h-toggleswitch-disabled-background:var(--h-form-field-disabled-background);--h-toggleswitch-hover-background:var(--h-surface-400);--h-toggleswitch-checked-background:var(--h-primary-color);--h-toggleswitch-checked-hover-background:var(--h-primary-hover-color);}.app-dark{--h-toggleswitch-handle-background:var(--h-surface-400);--h-toggleswitch-handle-disabled-background:var(--h-surface-900);--h-toggleswitch-handle-hover-background:var(--h-surface-300);--h-toggleswitch-handle-checked-background:var(--h-surface-900);--h-toggleswitch-handle-checked-hover-background:var(--h-surface-900);--h-toggleswitch-handle-color:var(--h-surface-900);--h-toggleswitch-handle-hover-color:var(--h-surface-800);--h-toggleswitch-handle-checked-color:var(--h-primary-color);--h-toggleswitch-handle-checked-hover-color:var(--h-primary-hover-color);--h-toggleswitch-background:var(--h-surface-700);--h-toggleswitch-disabled-background:var(--h-surface-600);--h-toggleswitch-hover-background:var(--h-surface-600);--h-toggleswitch-checked-background:var(--h-primary-color);--h-toggleswitch-checked-hover-background:var(--h-primary-hover-color);}
|
|
50
|
-
:root,:host{--h-datatable-paginator-bottom-border-color:var(--h-datatable-border-color);--h-datatable-paginator-bottom-border-width:0 0 1px 0;--h-datatable-paginator-top-border-color:var(--h-datatable-border-color);--h-datatable-paginator-top-border-width:0 0 1px 0;--h-datatable-filter-inline-gap:0.5rem;--h-datatable-filter-constraint-focus-background:var(--h-list-option-focus-background);--h-datatable-filter-constraint-selected-background:var(--h-list-option-selected-background);--h-datatable-filter-constraint-selected-focus-background:var(--h-list-option-selected-focus-background);--h-datatable-filter-constraint-color:var(--h-list-option-color);--h-datatable-filter-constraint-focus-color:var(--h-list-option-focus-color);--h-datatable-filter-constraint-selected-color:var(--h-list-option-selected-color);--h-datatable-filter-constraint-selected-focus-color:var(--h-list-option-selected-focus-color);--h-datatable-filter-constraint-padding:var(--h-list-option-padding);--h-datatable-filter-constraint-border-radius:var(--h-list-option-border-radius);--h-datatable-filter-constraint-separator-border-color:var(--h-content-border-color);--h-datatable-filter-constraint-list-padding:var(--h-list-padding);--h-datatable-filter-constraint-list-gap:var(--h-list-gap);--h-datatable-filter-rule-border-color:var(--h-content-border-color);--h-datatable-filter-overlay-popover-background:var(--h-overlay-popover-background);--h-datatable-filter-overlay-popover-border-color:var(--h-overlay-popover-border-color);--h-datatable-filter-overlay-popover-border-radius:var(--h-overlay-popover-border-radius);--h-datatable-filter-overlay-popover-color:var(--h-overlay-popover-color);--h-datatable-filter-overlay-popover-shadow:var(--h-overlay-popover-shadow);--h-datatable-filter-overlay-popover-padding:var(--h-overlay-popover-padding);--h-datatable-filter-overlay-popover-gap:0.5rem;--h-datatable-filter-overlay-select-background:var(--h-overlay-select-background);--h-datatable-filter-overlay-select-border-color:var(--h-overlay-select-border-color);--h-datatable-filter-overlay-select-border-radius:var(--h-overlay-select-border-radius);--h-datatable-filter-overlay-select-color:var(--h-overlay-select-color);--h-datatable-filter-overlay-select-shadow:var(--h-overlay-select-shadow);--h-datatable-row-toggle-button-hover-background:var(--h-content-hover-background);--h-datatable-row-toggle-button-selected-hover-background:var(--h-content-background);--h-datatable-row-toggle-button-color:var(--h-text-muted-color);--h-datatable-row-toggle-button-hover-color:var(--h-text-color);--h-datatable-row-toggle-button-selected-hover-color:var(--h-primary-color);--h-datatable-row-toggle-button-size:1.75rem;--h-datatable-row-toggle-button-border-radius:50%;--h-datatable-row-toggle-button-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-toggle-button-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-toggle-button-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-toggle-button-focus-ring-offset:var(--h-focus-ring-offset);--h-datatable-row-toggle-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-loading-icon-size:2rem;--h-datatable-sort-icon-color:var(--h-text-muted-color);--h-datatable-sort-icon-hover-color:var(--h-text-hover-muted-color);--h-datatable-sort-icon-size:0.875rem;--h-datatable-resize-indicator-width:1px;--h-datatable-resize-indicator-color:var(--h-primary-color);--h-datatable-column-resizer-width:0.5rem;--h-datatable-drop-point-color:var(--h-primary-color);--h-datatable-footer-background:var(--h-content-background);--h-datatable-footer-border-color:var(--h-datatable-border-color);--h-datatable-footer-color:var(--h-content-color);--h-datatable-footer-border-width:0 0 1px 0;--h-datatable-footer-padding:0.75rem 1rem;--h-datatable-footer-lg-padding:1rem 1.25rem;--h-datatable-footer-sm-padding:0.375rem 0.5rem;--h-datatable-column-footer-font-weight:600;--h-datatable-footer-cell-background:var(--h-content-background);--h-datatable-footer-cell-border-color:var(--h-datatable-border-color);--h-datatable-footer-cell-color:var(--h-content-color);--h-datatable-footer-cell-padding:0.75rem 1rem;--h-datatable-footer-cell-lg-padding:1rem 1.25rem;--h-datatable-footer-cell-sm-padding:0.375rem 0.5rem;--h-datatable-body-cell-border-color:var(--h-datatable-border-color);--h-datatable-body-cell-padding:0.75rem 1rem;--h-datatable-body-cell-lg-padding:1rem 1.25rem;--h-datatable-body-cell-sm-padding:0.375rem 0.5rem;--h-datatable-row-background:var(--h-content-background);--h-datatable-row-hover-background:var(--h-content-hover-background);--h-datatable-row-selected-background:var(--h-highlight-background);--h-datatable-row-color:var(--h-content-color);--h-datatable-row-hover-color:var(--h-content-hover-color);--h-datatable-row-selected-color:var(--h-highlight-color);--h-datatable-row-focus-ring-width:var(--h-focus-ring-width);--h-datatable-row-focus-ring-style:var(--h-focus-ring-style);--h-datatable-row-focus-ring-color:var(--h-focus-ring-color);--h-datatable-row-focus-ring-offset:-1px;--h-datatable-row-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-column-title-font-weight:600;--h-datatable-header-cell-background:var(--h-content-background);--h-datatable-header-cell-hover-background:var(--h-content-hover-background);--h-datatable-header-cell-selected-background:var(--h-highlight-background);--h-datatable-header-cell-border-color:var(--h-datatable-border-color);--h-datatable-header-cell-color:var(--h-content-color);--h-datatable-header-cell-hover-color:var(--h-content-hover-color);--h-datatable-header-cell-selected-color:var(--h-highlight-color);--h-datatable-header-cell-gap:0.5rem;--h-datatable-header-cell-padding:0.75rem 1rem;--h-datatable-header-cell-lg-padding:1rem 1.25rem;--h-datatable-header-cell-sm-padding:0.375rem 0.5rem;--h-datatable-header-cell-focus-ring-width:var(--h-focus-ring-width);--h-datatable-header-cell-focus-ring-style:var(--h-focus-ring-style);--h-datatable-header-cell-focus-ring-color:var(--h-focus-ring-color);--h-datatable-header-cell-focus-ring-offset:-1px;--h-datatable-header-cell-focus-ring-shadow:var(--h-focus-ring-shadow);--h-datatable-header-background:var(--h-content-background);--h-datatable-header-border-color:var(--h-datatable-border-color);--h-datatable-header-color:var(--h-content-color);--h-datatable-header-border-width:0 0 1px 0;--h-datatable-header-padding:0.75rem 1rem;--h-datatable-header-lg-padding:1rem 1.25rem;--h-datatable-header-sm-padding:0.375rem 0.5rem;--h-datatable-transition-duration:var(--h-transition-duration);--h-datatable-body-cell-selected-border-color:var(--h-primary-100);--h-datatable-row-striped-background:var(--h-surface-50);--h-datatable-border-color:var(--h-content-border-color);}.app-dark{--h-datatable-body-cell-selected-border-color:var(--h-primary-900);--h-datatable-row-striped-background:var(--h-surface-950);--h-datatable-border-color:var(--h-surface-800);}
|
|
51
52
|
:root,:host{--h-tabs-active-bar-height:1px;--h-tabs-active-bar-bottom:-1px;--h-tabs-active-bar-background:var(--h-primary-color);--h-tabs-nav-button-background:var(--h-content-background);--h-tabs-nav-button-color:var(--h-text-muted-color);--h-tabs-nav-button-hover-color:var(--h-text-color);--h-tabs-nav-button-width:2.5rem;--h-tabs-nav-button-focus-ring-width:var(--h-focus-ring-width);--h-tabs-nav-button-focus-ring-style:var(--h-focus-ring-style);--h-tabs-nav-button-focus-ring-color:var(--h-focus-ring-color);--h-tabs-nav-button-focus-ring-offset:-1px;--h-tabs-nav-button-focus-ring-shadow:var(--h-focus-ring-shadow);--h-tabs-tabpanel-background:var(--h-content-background);--h-tabs-tabpanel-color:var(--h-content-color);--h-tabs-tabpanel-padding:0.875rem 1.125rem 1.125rem 1.125rem;--h-tabs-tabpanel-focus-ring-width:var(--h-focus-ring-width);--h-tabs-tabpanel-focus-ring-style:var(--h-focus-ring-style);--h-tabs-tabpanel-focus-ring-color:var(--h-focus-ring-color);--h-tabs-tabpanel-focus-ring-offset:var(--h-focus-ring-offset);--h-tabs-tabpanel-focus-ring-shadow:inset var(--h-focus-ring-shadow);--h-tabs-tab-background:transparent;--h-tabs-tab-hover-background:transparent;--h-tabs-tab-active-background:transparent;--h-tabs-tab-border-width:0 0 1px 0;--h-tabs-tab-border-color:var(--h-content-border-color);--h-tabs-tab-hover-border-color:var(--h-content-border-color);--h-tabs-tab-active-border-color:var(--h-primary-color);--h-tabs-tab-color:var(--h-text-muted-color);--h-tabs-tab-hover-color:var(--h-text-color);--h-tabs-tab-active-color:var(--h-primary-color);--h-tabs-tab-padding:1rem 1.125rem;--h-tabs-tab-font-weight:600;--h-tabs-tab-margin:0 0 -1px 0;--h-tabs-tab-gap:0.5rem;--h-tabs-tab-focus-ring-width:var(--h-focus-ring-width);--h-tabs-tab-focus-ring-style:var(--h-focus-ring-style);--h-tabs-tab-focus-ring-color:var(--h-focus-ring-color);--h-tabs-tab-focus-ring-offset:-1px;--h-tabs-tab-focus-ring-shadow:var(--h-focus-ring-shadow);--h-tabs-tablist-border-width:0 0 1px 0;--h-tabs-tablist-background:var(--h-content-background);--h-tabs-tablist-border-color:var(--h-content-border-color);--h-tabs-transition-duration:var(--h-transition-duration);--h-tabs-nav-button-shadow:0px 0px 10px 50px rgba(255, 255, 255, 0.6);}.app-dark{--h-tabs-nav-button-shadow:0px 0px 10px 50px color-mix(in srgb, var(--h-content-background), transparent 50%);}
|
|
52
53
|
:root,:host{--h-tag-icon-size:0.75rem;--h-tag-font-size:0.875rem;--h-tag-font-weight:700;--h-tag-padding:0.25rem 0.5rem;--h-tag-gap:0.25rem;--h-tag-border-radius:var(--h-content-border-radius);--h-tag-rounded-border-radius:var(--h-border-radius-xl);--h-tag-contrast-background:var(--h-surface-950);--h-tag-contrast-color:var(--h-surface-0);--h-tag-danger-background:var(--h-red-100);--h-tag-danger-color:var(--h-red-700);--h-tag-warn-background:var(--h-orange-100);--h-tag-warn-color:var(--h-orange-700);--h-tag-info-background:var(--h-sky-100);--h-tag-info-color:var(--h-sky-700);--h-tag-success-background:var(--h-green-100);--h-tag-success-color:var(--h-green-700);--h-tag-secondary-background:var(--h-surface-100);--h-tag-secondary-color:var(--h-surface-600);--h-tag-primary-background:var(--h-primary-100);--h-tag-primary-color:var(--h-primary-700);}.app-dark{--h-tag-contrast-background:var(--h-surface-0);--h-tag-contrast-color:var(--h-surface-950);--h-tag-danger-background:color-mix(in srgb, var(--h-red-500), transparent 84%);--h-tag-danger-color:var(--h-red-300);--h-tag-warn-background:color-mix(in srgb, var(--h-orange-500), transparent 84%);--h-tag-warn-color:var(--h-orange-300);--h-tag-info-background:color-mix(in srgb, var(--h-sky-500), transparent 84%);--h-tag-info-color:var(--h-sky-300);--h-tag-success-background:color-mix(in srgb, var(--h-green-500), transparent 84%);--h-tag-success-color:var(--h-green-300);--h-tag-secondary-background:var(--h-surface-800);--h-tag-secondary-color:var(--h-surface-300);--h-tag-primary-background:color-mix(in srgb, var(--h-primary-500), transparent 84%);--h-tag-primary-color:var(--h-primary-300);}
|
|
53
54
|
:root,:host{--h-timeline-event-connector-color:var(--h-content-border-color);--h-timeline-event-connector-size:2px;--h-timeline-event-marker-size:1.125rem;--h-timeline-event-marker-border-radius:50%;--h-timeline-event-marker-border-width:2px;--h-timeline-event-marker-background:var(--h-content-background);--h-timeline-event-marker-border-color:var(--h-content-border-color);--h-timeline-event-marker-content-border-radius:50%;--h-timeline-event-marker-content-size:0.375rem;--h-timeline-event-marker-content-background:var(--h-primary-color);--h-timeline-event-marker-content-inset-shadow:0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);--h-timeline-vertical-event-content-padding:0 1rem;--h-timeline-horizontal-event-content-padding:1rem 0;--h-timeline-event-min-height:5rem;}
|