diff --git a/.changeset/weak-frogs-fail.md b/.changeset/weak-frogs-fail.md new file mode 100644 index 00000000..d1374c11 --- /dev/null +++ b/.changeset/weak-frogs-fail.md @@ -0,0 +1,5 @@ +--- +'@inventage-web-components/portal-navigation': patch +--- + +Fix tree parent element padding, properly using the `--portal-navigation-tree-parent-padding-x` and `--portal-navigation-tree-parent-padding-y` values with their respective fallbacks to menu item padding values `--portal-navigation-menu-item-padding-x` and `--portal-navigation-menu-item-padding-y`. diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts index d63998ca..b36bad8c 100644 --- a/packages/portal-navigation/src/PortalNavigation.ts +++ b/packages/portal-navigation/src/PortalNavigation.ts @@ -130,7 +130,7 @@ type NavigationCssClasses = typeof NavigationCssClasses; * * @cssprop {length} [--portal-navigation-dropdown-item-padding-x=0.5rem] Dropdown item horizontal padding * @cssprop {length} [--portal-navigation-dropdown-item-padding-y=1rem] Dropdown item vertical padding - * @cssprop {length} [--portal-navigation-tree-parent-padding-x=var(--portal-navigation-horizontal-base)] Horizontal padding of parent items in the tree (mobile breakpoint) + * @cssprop {length} [--portal-navigation-tree-parent-padding-x=var(--portal-navigation-menu-item-padding-x)] Horizontal padding of parent items in the tree (mobile breakpoint) * @cssprop {length} [--portal-navigation-tree-parent-padding-y=var(--portal-navigation-menu-item-padding-y)] Vertical padding of parent items in the tree (mobile breakpoint) * @cssprop {length} [--portal-navigation-tree-items-margin-y=var(--portal-navigation-vertical-base)] Vertical margin of parent items in the tree (mobile breakpoint) * @cssprop {length} [--portal-navigation-tree-items-link-padding-x=var(--portal-navigation-horizontal-base)] Horizontal padding of links in parent items in the tree (mobile breakpoint) diff --git a/packages/portal-navigation/src/styles.css b/packages/portal-navigation/src/styles.css index c1aae0ec..ffa10651 100644 --- a/packages/portal-navigation/src/styles.css +++ b/packages/portal-navigation/src/styles.css @@ -109,7 +109,7 @@ display: flex; align-items: center; color: var(--portal-navigation-color-link, var(--portal-navigation-color-primary)); - padding: var(--portal-navigation-menu-item-padding-y, 0.5rem) var(--portal-navigation-menu-item-padding-x, 0); + padding: var(--portal-navigation-menu-item-padding-y, 0.5rem) var(--portal-navigation-menu-item-padding-x, 0.5rem); white-space: var(--portal-navigation-menu-item-white-space, nowrap); cursor: pointer; /* because we can have a element without an href attribute */ @@ -234,7 +234,8 @@ * Tree menu (mobile breakpoint) */ .tree-parent { - padding: var(--portal-navigation-vertical-base, 0.5rem) 0; + padding: var(--portal-navigation-tree-parent-padding-y, var(--portal-navigation-menu-item-padding-y, 0.5rem)) + var(--portal-navigation-tree-parent-padding-x, var(--portal-navigation-menu-item-padding-x, 0.5rem)); border-top: var(--portal-navigation-tree-parent-border-top, none); border-bottom: var(--portal-navigation-tree-parent-border-bottom, solid 1px var(--portal-navigation-color-border, rgba(44, 62, 80, 0.1))); width: 100%; @@ -261,11 +262,6 @@ height: 1.5rem; } -.tree-container > .link { - padding: var(--portal-navigation-tree-parent-padding-y, var(--portal-navigation-menu-item-padding-y, 0.5rem)) - var(--portal-navigation-tree-parent-padding-x, var(--portal-navigation-horizontal-base, 1rem)); -} - .tree-items { margin-top: var(--portal-navigation-tree-items-margin-y, var(--portal-navigation-vertical-base, 0.5rem)); margin-bottom: var(--portal-navigation-tree-items-margin-y, var(--portal-navigation-vertical-base, 0.5rem));