ng-hub-ui-ds 22.7.6 → 22.7.8
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/CHANGELOG.md +12 -0
- package/docs/variables-css-library.en.md +106 -101
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,18 @@ All notable changes to `ng-hub-ui-ds` are documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [22.7.8] - 2026-08-17
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **Four `hub-list` tokens documented**, following `ng-hub-ui-paginable@22.11.0`: `--hub-list-radio-size` (the single-selection radio, defaulting to the checkbox's size), `--hub-list-divider-width` and `--hub-list-divider-color` (the rule that stands in for the gap between rows when a list is flush, read only under that variant), and `--hub-list-checkbox-size`, which shipped undocumented. Two internal per-cell relays of the table's selected-row bar are recorded as `INTERNAL` so the parity check stops reporting them as undeclared.
|
|
13
|
+
|
|
14
|
+
## [22.7.7] - 2026-08-17
|
|
15
|
+
|
|
16
|
+
### Added
|
|
17
|
+
|
|
18
|
+
- **`--hub-modal-resize-duration` and `--hub-modal-resize-easing`** documented in the token spec. They tune the travel the modal now performs between two content heights. The duration is unitless on purpose: it is read from script rather than used in a CSS transition, because the height a modal is leaving and the one it is arriving at both compute to `auto`, and no CSS transition fires on that.
|
|
19
|
+
|
|
8
20
|
## [22.7.6] - 2026-08-17
|
|
9
21
|
|
|
10
22
|
### Fixed
|
|
@@ -1520,7 +1520,7 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1520
1520
|
| Token | Initial value | Usage | Status | Source |
|
|
1521
1521
|
| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | -------- | ------------------------------ |
|
|
1522
1522
|
| `--hub-modal-zindex` | `var(--hub-sys-zindex-modal, 1055)` | Modal layer z-index | `IN_USE` | `modal/src/lib/modal.scss:46` |
|
|
1523
|
-
| `--hub-modal-backdrop-zindex` | `calc(var(--hub-modal-zindex, var(--hub-sys-zindex-modal, 1055)) - 1)` | Backdrop layer z-index | `IN_USE` | `modal/src/lib/modal.scss:
|
|
1523
|
+
| `--hub-modal-backdrop-zindex` | `calc(var(--hub-modal-zindex, var(--hub-sys-zindex-modal, 1055)) - 1)` | Backdrop layer z-index | `IN_USE` | `modal/src/lib/modal.scss:202` |
|
|
1524
1524
|
| `--hub-modal-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent (opt-in via `variant`); re-based per variant | `IN_USE` | `modal/src/lib/modal.scss:54` |
|
|
1525
1525
|
| `--hub-modal-accent-subtle` | `color-mix(in oklch, var(--hub-modal-accent) 12%, var(--hub-sys-surface-page, #ffffff))` | Variant tinted background (generated from the accent) | `IN_USE` | `modal/src/lib/modal.scss:56` |
|
|
1526
1526
|
| `--hub-modal-accent-border` | `color-mix(in oklch, var(--hub-modal-accent) 35%, var(--hub-sys-surface-page, #ffffff))` | Variant accent-tinted border (outer + header/footer rules) | `IN_USE` | `modal/src/lib/modal.scss:58` |
|
|
@@ -1613,7 +1613,9 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1613
1613
|
| `--hub-modal-fade-transform` | `translate(0, -50px)` | Dialog transform at fade start | `IN_USE` | `modal/src/lib/modal.scss:196` |
|
|
1614
1614
|
| `--hub-modal-show-transform` | `none` | Dialog transform when shown | `IN_USE` | `modal/src/lib/modal.scss:197` |
|
|
1615
1615
|
| `--hub-modal-transition` | `var(--hub-sys-transition-base, all 0.2s ease-in-out)` | Dialog transition curve/duration | `IN_USE` | `modal/src/lib/modal.scss:198` |
|
|
1616
|
-
| `--hub-modal-
|
|
1616
|
+
| `--hub-modal-resize-duration` | `200` | Milliseconds the dialog takes to travel between two content heights. Unitless, because it is read from script rather than used in a CSS transition | `IN_USE` | `modal/src/lib/modal.scss:199` |
|
|
1617
|
+
| `--hub-modal-resize-easing` | `ease-in-out` | Easing for that same height travel | `IN_USE` | `modal/src/lib/modal.scss:200` |
|
|
1618
|
+
| `--hub-modal-scale-transform` | `scale(1.02)` | Dialog scale in static backdrop bump | `IN_USE` | `modal/src/lib/modal.scss:201` |
|
|
1617
1619
|
| `--hub-modal-close-padding-x` | `0` | Close button horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:188` |
|
|
1618
1620
|
| `--hub-modal-close-padding-y` | `0` | Close button vertical padding | `IN_USE` | `modal/src/lib/modal.scss:189` |
|
|
1619
1621
|
| `--hub-modal-padding-x` | `var(--hub-ref-space-3, 1rem)` | Dialog body horizontal padding | `IN_USE` | `modal/src/lib/modal.scss:163` |
|
|
@@ -1702,8 +1704,8 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1702
1704
|
| `--hub-table-selected-color` | `var(--hub-sys-text-primary, #212529)` | Selected row text color | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:99` |
|
|
1703
1705
|
| `--hub-table-selected-bar-width` | `0` | Width of the optional accent bar on the selected row's leading edge (`0` = hidden) | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:105` |
|
|
1704
1706
|
| `--hub-table-selected-bar-color` | `var(--hub-table-accent)` | Colour of the selected-row accent bar | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:106` |
|
|
1705
|
-
| `--hub-table-cell-bar-width` | `var(--hub-table-selected-bar-width)` | Internal per-cell relay of the selected-row bar width (mirrored/negated for RTL); theme via `--hub-table-selected-bar-width` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:
|
|
1706
|
-
| `--hub-table-cell-bar-color` | `var(--hub-table-selected-bar-color, var(--hub-table-accent))` | Internal per-cell relay of the selected-row bar colour; theme via `--hub-table-selected-bar-color` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:
|
|
1707
|
+
| `--hub-table-cell-bar-width` | `var(--hub-table-selected-bar-width)` | Internal per-cell relay of the selected-row bar width (mirrored/negated for RTL); theme via `--hub-table-selected-bar-width` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:785` |
|
|
1708
|
+
| `--hub-table-cell-bar-color` | `var(--hub-table-selected-bar-color, var(--hub-table-accent))` | Internal per-cell relay of the selected-row bar colour; theme via `--hub-table-selected-bar-color` | `INTERNAL` | `paginable/src/lib/components/table/table.component.scss:786` |
|
|
1707
1709
|
| `--hub-table-accent-bg` | `transparent` | Accent layer applied via `box-shadow inset` on cells | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:82` |
|
|
1708
1710
|
| `--hub-table-active-bg` | `var(--hub-sys-state-active-bg, rgba(0,0,0,0.1))` | Cell background in active row state | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:83` |
|
|
1709
1711
|
| `--hub-table-active-color` | `var(--hub-sys-text-primary, #212529)` | Cell text color in active row state | `IN_USE` | `paginable/src/lib/components/table/table.component.scss:84` |
|
|
@@ -1787,103 +1789,106 @@ The standalone `tabs` proposal was **superseded**: the tabs UI shipped inside `n
|
|
|
1787
1789
|
|
|
1788
1790
|
| Variable Name | Initial value | Usage | Status | Source |
|
|
1789
1791
|
| --------------------------------------- | ---------------------------------------------- | -------------------------------------------------- | -------- | ------------------------------------------------------------------------- |
|
|
1790
|
-
| `--hub-list-checkbox-size` | `1rem` | Size of the selection checkbox | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:
|
|
1791
|
-
| `--hub-list-
|
|
1792
|
-
| `--hub-list-
|
|
1793
|
-
| `--hub-list-
|
|
1794
|
-
| `--hub-list-
|
|
1795
|
-
| `--hub-list-
|
|
1796
|
-
| `--hub-list-
|
|
1797
|
-
| `--hub-list-
|
|
1798
|
-
| `--hub-list-
|
|
1799
|
-
| `--hub-list-
|
|
1800
|
-
| `--hub-list-
|
|
1801
|
-
| `--hub-list-
|
|
1802
|
-
| `--hub-list-
|
|
1803
|
-
| `--hub-list-
|
|
1804
|
-
| `--hub-list-
|
|
1805
|
-
| `--hub-list-item-
|
|
1806
|
-
| `--hub-list-item-
|
|
1807
|
-
| `--hub-list-item-
|
|
1808
|
-
| `--hub-list-item-
|
|
1809
|
-
| `--hub-list-item-
|
|
1810
|
-
| `--hub-list-
|
|
1811
|
-
| `--hub-list-
|
|
1812
|
-
| `--hub-list-item-
|
|
1813
|
-
| `--hub-list-
|
|
1814
|
-
| `--hub-list-
|
|
1815
|
-
| `--hub-list-
|
|
1816
|
-
| `--hub-list-
|
|
1817
|
-
| `--hub-list-bottom-bar-
|
|
1818
|
-
| `--hub-list-bottom-bar-
|
|
1819
|
-
| `--hub-list-bottom-bar-
|
|
1820
|
-
| `--hub-list-bottom-bar-
|
|
1821
|
-
| `--hub-list-bottom-bar-paginator-
|
|
1822
|
-
| `--hub-list-bottom-bar-settings-
|
|
1823
|
-
| `--hub-list-bottom-bar-info-
|
|
1824
|
-
| `--hub-list-
|
|
1825
|
-
| `--hub-list-
|
|
1826
|
-
| `--hub-list-
|
|
1827
|
-
| `--hub-list-search-
|
|
1828
|
-
| `--hub-list-search-
|
|
1829
|
-
| `--hub-list-search-input-
|
|
1830
|
-
| `--hub-list-
|
|
1831
|
-
| `--hub-list-
|
|
1832
|
-
| `--hub-list-
|
|
1833
|
-
| `--hub-list-action-btn-
|
|
1834
|
-
| `--hub-list-action-btn-
|
|
1835
|
-
| `--hub-list-action-btn-
|
|
1836
|
-
| `--hub-list-action-btn-
|
|
1837
|
-
| `--hub-list-
|
|
1838
|
-
| `--hub-list-
|
|
1839
|
-
| `--hub-list-
|
|
1840
|
-
| `--hub-list-
|
|
1841
|
-
| `--hub-list-cards-
|
|
1842
|
-
| `--hub-list-cards-color` | `var(--hub-list-item-color)` | Card
|
|
1843
|
-
| `--hub-list-cards-
|
|
1844
|
-
| `--hub-list-cards-
|
|
1845
|
-
| `--hub-list-cards-
|
|
1846
|
-
| `--hub-list-cards-
|
|
1847
|
-
| `--hub-list-cards-
|
|
1848
|
-
| `--hub-list-cards-
|
|
1849
|
-
| `--hub-list-cards-
|
|
1850
|
-
| `--hub-list-cards-
|
|
1851
|
-
| `--hub-list-
|
|
1852
|
-
| `--hub-list-
|
|
1853
|
-
| `--hub-list-
|
|
1854
|
-
| `--hub-list-
|
|
1855
|
-
| `--hub-list-
|
|
1856
|
-
| `--hub-list-
|
|
1857
|
-
| `--hub-list-
|
|
1858
|
-
| `--hub-list-
|
|
1859
|
-
| `--hub-list-
|
|
1860
|
-
| `--hub-list-
|
|
1861
|
-
| `--hub-list-placeholder-
|
|
1862
|
-
| `--hub-list-placeholder-border-
|
|
1863
|
-
| `--hub-list-placeholder-
|
|
1864
|
-
| `--hub-list-
|
|
1865
|
-
| `--hub-list-
|
|
1866
|
-
| `--hub-list-
|
|
1867
|
-
| `--hub-list-
|
|
1868
|
-
| `--hub-list-
|
|
1869
|
-
| `--hub-list-connector-
|
|
1870
|
-
| `--hub-list-
|
|
1871
|
-
| `--hub-list-
|
|
1872
|
-
| `--hub-list-
|
|
1873
|
-
| `--hub-list-
|
|
1874
|
-
| `--hub-list-
|
|
1875
|
-
| `--hub-list-
|
|
1876
|
-
| `--hub-list-
|
|
1877
|
-
| `--hub-list-
|
|
1878
|
-
| `--hub-list-
|
|
1879
|
-
| `--hub-list-search-
|
|
1880
|
-
| `--hub-list-search-
|
|
1881
|
-
| `--hub-list-search-
|
|
1882
|
-
| `--hub-list-search-
|
|
1883
|
-
| `--hub-list-
|
|
1884
|
-
| `--hub-list-
|
|
1885
|
-
| `--hub-list-
|
|
1886
|
-
| `--hub-list-top-bar-
|
|
1792
|
+
| `--hub-list-checkbox-size` | `1rem` | Size of the selection checkbox | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:6` |
|
|
1793
|
+
| `--hub-list-radio-size` | `var(--hub-list-checkbox-size)` | Size of the single-selection radio | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:9` |
|
|
1794
|
+
| `--hub-list-divider-width` | `var(--hub-ref-border-width, 1px)` | Rule between rows when the list is flush | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:35` |
|
|
1795
|
+
| `--hub-list-divider-color` | `var(--hub-list-item-border-color)` | Colour of that rule | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:36` |
|
|
1796
|
+
| `--hub-list-chevron-size` | `var(--hub-ref-icon-size, 1em)` | Size of the expand/collapse icon | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:10` |
|
|
1797
|
+
| `--hub-list-bg` | `transparent` | Background of the whole list component (host); transparent by default | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:11` |
|
|
1798
|
+
| `--hub-list-border-radius` | `var(--hub-ref-radius-md, 0.375rem)` | Border radius of the list component surface | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:12` |
|
|
1799
|
+
| `--hub-list-padding-x` | `var(--hub-ref-space-0, 0)` | Horizontal padding of the list component surface | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:13` |
|
|
1800
|
+
| `--hub-list-padding-y` | `var(--hub-ref-space-0, 0)` | Vertical padding of the list component surface | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:14` |
|
|
1801
|
+
| `--hub-list-gap` | `var(--hub-ref-space-4, 1.5rem)` | Gap between top bar, items collection and bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:15` |
|
|
1802
|
+
| `--hub-list-items-bg` | `transparent` | Background of the items collection (`<ul>`) | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:16` |
|
|
1803
|
+
| `--hub-list-items-gap` | `var(--hub-ref-space-2, 0.5rem)` | Gap between list items | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:17` |
|
|
1804
|
+
| `--hub-list-empty-bg` | `var(--hub-ref-surface-2, #f8f9fa)` | Background of the empty state | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:18` |
|
|
1805
|
+
| `--hub-list-empty-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Border color of the empty state | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:19` |
|
|
1806
|
+
| `--hub-list-empty-color` | `var(--hub-sys-text-muted, #6c757d)` | Text color of the empty state | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:20` |
|
|
1807
|
+
| `--hub-list-item-bg` | `var(--hub-sys-surface-page, #ffffff)` | Background of an item (solid surface, like table rows) | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:23` |
|
|
1808
|
+
| `--hub-list-item-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Border color of an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:24` |
|
|
1809
|
+
| `--hub-list-item-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Border radius of an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:26` |
|
|
1810
|
+
| `--hub-list-item-color` | `var(--hub-sys-text-primary, #212529)` | Text color of an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:27` |
|
|
1811
|
+
| `--hub-list-item-gap` | `var(--hub-ref-space-2, 0.5rem)` | Internal gap inside an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:28` |
|
|
1812
|
+
| `--hub-list-item-hover-bg` | `var(--hub-ref-surface-2, #f8f9fa)` | Background of an item on hover | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:29` |
|
|
1813
|
+
| `--hub-list-item-padding-x` | `var(--hub-ref-space-3, 1rem)` | Horizontal padding of an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:30` |
|
|
1814
|
+
| `--hub-list-item-padding-y` | `var(--hub-ref-space-2, 0.5rem)` | Vertical padding of an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:31` |
|
|
1815
|
+
| `--hub-list-children-gap` | `var(--hub-list-item-padding-y)` | Top margin separating a nested children list from its parent item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:32` |
|
|
1816
|
+
| `--hub-list-accent` | `var(--hub-sys-color-primary, #0d6efd)` | Semantic accent for the selected item — re-based per `variant` (list & cards) | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:46` |
|
|
1817
|
+
| `--hub-list-item-selected-bg` | `var(--hub-list-accent)` | Background of a selected item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:51` |
|
|
1818
|
+
| `--hub-list-item-selected-color` | `var(--hub-list-accent-on)` | Text color of a selected item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:52` |
|
|
1819
|
+
| `--hub-list-bottom-bar-gap` | `var(--hub-ref-space-3, 1rem)` | Gap between elements in the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:74` |
|
|
1820
|
+
| `--hub-list-bottom-bar-justify-content` | `space-around` | `justify-content` of the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:75` |
|
|
1821
|
+
| `--hub-list-bottom-bar-align-items` | `center` | `align-items` of the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:76` |
|
|
1822
|
+
| `--hub-list-bottom-bar-wrap` | `wrap` | `flex-wrap` of the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:77` |
|
|
1823
|
+
| `--hub-list-bottom-bar-paginator-order` | `1` | Flex order of the paginator slot in the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:78` |
|
|
1824
|
+
| `--hub-list-bottom-bar-settings-order` | `2` | Flex order of the settings slot in the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:79` |
|
|
1825
|
+
| `--hub-list-bottom-bar-info-order` | `3` | Flex order of the info slot in the bottom bar | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:80` |
|
|
1826
|
+
| `--hub-list-bottom-bar-paginator-flex` | `0 0 auto` | Flex shorthand for the paginator slot | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:81` |
|
|
1827
|
+
| `--hub-list-bottom-bar-settings-flex` | `0 0 auto` | Flex shorthand for the settings slot | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:82` |
|
|
1828
|
+
| `--hub-list-bottom-bar-info-flex` | `0 0 auto` | Flex shorthand for the info slot | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:83` |
|
|
1829
|
+
| `--hub-list-search-btn-bg` | `var(--hub-ref-surface-2, #f8f9fa)` | Background of the search trigger button | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:84` |
|
|
1830
|
+
| `--hub-list-search-btn-color` | `var(--hub-sys-text-primary, #212529)` | Icon/text color of the search trigger button | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:85` |
|
|
1831
|
+
| `--hub-list-search-input-bg` | `var(--hub-sys-surface-page, #ffffff)` | Background of the search input | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:87` |
|
|
1832
|
+
| `--hub-list-search-input-border-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Border of the search input | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:88` |
|
|
1833
|
+
| `--hub-list-search-input-border-radius` | `var(--hub-ref-radius-sm, 0.25rem)` | Border radius of the search input | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:89` |
|
|
1834
|
+
| `--hub-list-search-input-color` | `var(--hub-sys-text-primary, #212529)` | Text color of the search input | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:90` |
|
|
1835
|
+
| `--hub-list-action-btn-bg` | `var(--hub-sys-surface-page, #ffffff)` | Action button background color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:97` |
|
|
1836
|
+
| `--hub-list-action-btn-border-color` | `var(--hub-list-item-border-color)` | Action button border color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:99` |
|
|
1837
|
+
| `--hub-list-action-btn-border-radius` | `var(--hub-list-item-border-radius)` | Action button border radius | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:100` |
|
|
1838
|
+
| `--hub-list-action-btn-color` | `var(--hub-list-item-color)` | Action button text color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:98` |
|
|
1839
|
+
| `--hub-list-action-btn-hover-bg` | `var(--hub-list-item-hover-bg)` | Action button hover background | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:103` |
|
|
1840
|
+
| `--hub-list-action-btn-padding-x` | `0.75rem` | Action button horizontal padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:102` |
|
|
1841
|
+
| `--hub-list-action-btn-padding-y` | `0.375rem` | Action button vertical padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:101` |
|
|
1842
|
+
| `--hub-list-batch-actions-gap` | `var(--hub-ref-space-2, 0.5rem)` | Batch actions group gap | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:73` |
|
|
1843
|
+
| `--hub-list-cards-bg` | `var(--hub-list-item-bg, transparent)` | Card background color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:58` |
|
|
1844
|
+
| `--hub-list-cards-border-color` | `var(--hub-list-item-border-color)` | Card border color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:62` |
|
|
1845
|
+
| `--hub-list-cards-border-radius` | `var(--hub-list-item-border-radius)` | Card border radius | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:64` |
|
|
1846
|
+
| `--hub-list-cards-border-width` | `var(--hub-list-item-border-width, 1px)` | Card border width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:63` |
|
|
1847
|
+
| `--hub-list-cards-color` | `var(--hub-list-item-color)` | Card text color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:59` |
|
|
1848
|
+
| `--hub-list-cards-column-gap` | `var(--hub-list-cards-gap)` | Card grid column gap | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:57` |
|
|
1849
|
+
| `--hub-list-cards-columns` | `auto-fit` | Card grid column count | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:55` |
|
|
1850
|
+
| `--hub-list-cards-gap` | `var(--hub-list-items-gap)` | Card grid gap | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:54` |
|
|
1851
|
+
| `--hub-list-cards-hover-bg` | `var(--hub-list-item-hover-bg)` | Card hover background color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:66` |
|
|
1852
|
+
| `--hub-list-cards-hover-shadow` | `var(--hub-list-cards-shadow)` | Card hover box shadow | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:67` |
|
|
1853
|
+
| `--hub-list-cards-min-column-width` | `18rem` | Card minimum column width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:53` |
|
|
1854
|
+
| `--hub-list-cards-padding-x` | `var(--hub-list-item-padding-x)` | Card horizontal padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:60` |
|
|
1855
|
+
| `--hub-list-cards-padding-y` | `var(--hub-list-item-padding-y)` | Card vertical padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:61` |
|
|
1856
|
+
| `--hub-list-drag-handle-color` | `var(--hub-sys-text-muted, #6c757d)` | Drag handle colour | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:105` |
|
|
1857
|
+
| `--hub-list-drag-handle-cursor` | `grab` | Drag handle cursor | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:106` |
|
|
1858
|
+
| `--hub-list-drag-handle-size` | `var(--hub-ref-icon-size, 1em)` | Drag handle size | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:107` |
|
|
1859
|
+
| `--hub-list-item-dragging-opacity` | `0.5` | Opacity of the item being dragged | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:108` |
|
|
1860
|
+
| `--hub-list-item-dragging-cursor` | `grabbing` | Cursor while dragging an item | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:109` |
|
|
1861
|
+
| `--hub-list-drop-target-outline-color` | `var(--hub-list-accent)` | Drop-target outline colour | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:110` |
|
|
1862
|
+
| `--hub-list-drop-target-outline-width` | `2px` | Drop-target outline width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:111` |
|
|
1863
|
+
| `--hub-list-placeholder-bg` | `var(--hub-ref-surface-2, #f8f9fa)` | Drop placeholder background | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:112` |
|
|
1864
|
+
| `--hub-list-placeholder-border-color` | `var(--hub-list-accent)` | Drop placeholder border colour | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:113` |
|
|
1865
|
+
| `--hub-list-placeholder-border-width` | `2px` | Drop placeholder border width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:114` |
|
|
1866
|
+
| `--hub-list-placeholder-border-style` | `dashed` | Drop placeholder border style | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:115` |
|
|
1867
|
+
| `--hub-list-placeholder-border-radius` | `var(--hub-list-item-border-radius)` | Drop placeholder border radius | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:116` |
|
|
1868
|
+
| `--hub-list-placeholder-min-height` | `2.5rem` | Drop placeholder minimum height | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:117` |
|
|
1869
|
+
| `--hub-list-ghost-opacity` | `0.85` | Drag ghost opacity | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:118` |
|
|
1870
|
+
| `--hub-list-ghost-shadow` | `0 0.5rem 1rem rgba(0, 0, 0, 0.15)` | Drag ghost shadow | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:119` |
|
|
1871
|
+
| `--hub-list-connector-color` | `var(--hub-sys-border-color-default, #dee2e6)` | Color of the opt-in connector line between consecutive items (`connected`) | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:121` |
|
|
1872
|
+
| `--hub-list-connector-width` | `2px` | Thickness of the item connector line | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:122` |
|
|
1873
|
+
| `--hub-list-connector-style` | `solid` | Border-style of the item connector (e.g. `dashed`) | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:123` |
|
|
1874
|
+
| `--hub-list-connector-offset` | `var(--hub-list-item-padding-x, var(--hub-ref-space-3, 1rem))` | Inline offset of the connector from the item's leading edge | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:124` |
|
|
1875
|
+
| `--hub-list-cards-row-gap` | `var(--hub-list-cards-gap)` | Card grid row gap | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:56` |
|
|
1876
|
+
| `--hub-list-cards-shadow` | `none` | Card box shadow | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:65` |
|
|
1877
|
+
| `--hub-list-cards-transition` | `background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out` | Card hover transition | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:68` |
|
|
1878
|
+
| `--hub-list-empty-padding-x` | `var(--hub-ref-space-3, 1rem)` | Empty state horizontal padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:21` |
|
|
1879
|
+
| `--hub-list-empty-padding-y` | `var(--hub-ref-space-3, 1rem)` | Empty state vertical padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:22` |
|
|
1880
|
+
| `--hub-list-item-border-width` | `1px` | List item border width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:25` |
|
|
1881
|
+
| `--hub-list-search-border-color` | `var(--hub-list-search-input-border-color)` | Search field border color | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:91` |
|
|
1882
|
+
| `--hub-list-search-border-radius` | `var(--hub-list-search-input-border-radius)` | Search field border radius | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:93` |
|
|
1883
|
+
| `--hub-list-search-border-width` | `1px` | Search field border width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:92` |
|
|
1884
|
+
| `--hub-list-search-button-min-width` | `2.75rem` | Search button minimum width | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:86` |
|
|
1885
|
+
| `--hub-list-search-input-font-size` | `1rem` | Search input font size | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:96` |
|
|
1886
|
+
| `--hub-list-search-input-padding-x` | `0.75rem` | Search input horizontal padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:94` |
|
|
1887
|
+
| `--hub-list-search-input-padding-y` | `0.375rem` | Search input vertical padding | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:95` |
|
|
1888
|
+
| `--hub-list-top-bar-align-items` | `center` | Top bar cross-axis alignment | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:71` |
|
|
1889
|
+
| `--hub-list-top-bar-gap` | `var(--hub-ref-space-2, 0.5rem)` | Top bar content gap | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:69` |
|
|
1890
|
+
| `--hub-list-top-bar-justify-content` | `end` | Top bar content justification | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:70` |
|
|
1891
|
+
| `--hub-list-top-bar-wrap` | `wrap` | Top bar flex wrapping | `IN_USE` | `paginable/src/lib/components/list/paginable-list/list.component.scss:72` |
|
|
1887
1892
|
|
|
1888
1893
|
#### `paginator`
|
|
1889
1894
|
|