@mixtint/primer-view-components 0.88.0 → 0.89.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/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/assets/styles/primer_view_components.css +13 -10
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/tree_view.css +11 -8
- package/app/components/primer/alpha/tree_view.css.json +1 -2
- package/app/components/primer/open_project/filterable_tree_view.css +2 -2
- package/app/components/primer/open_project/filterable_tree_view.js +10 -4
- package/package.json +11 -11
|
@@ -4785,28 +4785,31 @@ a.tabnav-extra:hover {
|
|
|
4785
4785
|
|
|
4786
4786
|
/* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
|
|
4787
4787
|
across more lines. */
|
|
4788
|
+
align-self: baseline;
|
|
4788
4789
|
height: var(--custom-line-height, 1.3rem);
|
|
4789
4790
|
color: var(--fgColor-muted);
|
|
4790
4791
|
align-items: center;
|
|
4791
4792
|
}
|
|
4792
4793
|
|
|
4793
4794
|
.TreeViewRootUlStyles .TreeViewItemLeadingAction {
|
|
4794
|
-
display: flex;
|
|
4795
|
-
color: var(--fgColor-muted);
|
|
4796
4795
|
grid-area: leadingAction;
|
|
4797
4796
|
}
|
|
4798
4797
|
|
|
4799
|
-
:is(.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
|
|
4800
|
-
flex-shrink: 1;
|
|
4801
|
-
}
|
|
4802
|
-
|
|
4803
4798
|
.TreeViewRootUlStyles .TreeViewItemTrailingAction {
|
|
4799
|
+
grid-area: trailingAction;
|
|
4800
|
+
}
|
|
4801
|
+
|
|
4802
|
+
.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction {
|
|
4804
4803
|
display: flex;
|
|
4805
4804
|
color: var(--fgColor-muted);
|
|
4806
|
-
|
|
4805
|
+
/* The dynamic top and bottom padding to maintain the minimum item height for single line items while cancelling out the invisible area of the button */
|
|
4806
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
4807
|
+
padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
|
|
4808
|
+
/* stylelint-disable-next-line primer/spacing */
|
|
4809
|
+
padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem) - 12px) / 2);
|
|
4807
4810
|
}
|
|
4808
4811
|
|
|
4809
|
-
:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction) > button {
|
|
4812
|
+
:is(.TreeViewRootUlStyles .TreeViewItemTrailingAction,.TreeViewRootUlStyles .TreeViewItemLeadingAction) > button {
|
|
4810
4813
|
flex-shrink: 1;
|
|
4811
4814
|
}
|
|
4812
4815
|
|
|
@@ -7748,7 +7751,7 @@ filterable-tree-view {
|
|
|
7748
7751
|
/* Highlight style for CSS Custom Highlight API */
|
|
7749
7752
|
|
|
7750
7753
|
::highlight(primer-filterable-tree-view-search-results) {
|
|
7751
|
-
background-color: var(--
|
|
7754
|
+
background-color: var(--display-yellow-scale-2);
|
|
7752
7755
|
}
|
|
7753
7756
|
|
|
7754
7757
|
/* Fallback: <mark> elements used when CSS Custom Highlight API is unavailable */
|
|
@@ -7756,7 +7759,7 @@ filterable-tree-view {
|
|
|
7756
7759
|
/* stylelint-disable-next-line selector-max-type */
|
|
7757
7760
|
|
|
7758
7761
|
filterable-tree-view mark {
|
|
7759
|
-
background-color: var(--
|
|
7762
|
+
background-color: var(--display-yellow-scale-2);
|
|
7760
7763
|
color: inherit;
|
|
7761
7764
|
}
|
|
7762
7765
|
|