Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix submenu hover issue. #31195

Merged
merged 4 commits into from
Apr 28, 2021
+26 −20
Merged

Fix submenu hover issue. #31195

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f7cf817
Fix submenu hover issue.
jasmussen Apr 26, 2021
6bafbb8
Fix issues
jasmussen Apr 27, 2021
7878901
Fix frontend issue.
jasmussen Apr 28, 2021
5a5bcbb
TT1 fix.
jasmussen Apr 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 26 additions & 20 deletions packages/block-library/src/navigation-link/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,11 +70,19 @@
}
}

// Some themes have added custom padding to the link, which does not consider the Page List block.
// Unfortunately we now need to add extra specificity and undo that, so that the block still works.
.wp-block-pages-list__item .wp-block-pages-list__item__link,
.wp-block-navigation-link .wp-block-navigation-link__content.wp-block-navigation-link__content.wp-block-navigation-link__content {
padding: 0;
}

// Styles for submenu flyout.
.has-child {
// This adds a little space between the link and the dropdown icon.
> .wp-block-pages-list__item__link,
> .wp-block-navigation-link__content {
padding-right: 0.5em;
margin-right: 0.5em;
}

.submenu-container,
Expand Down Expand Up @@ -191,7 +199,7 @@

// Margins, paddings, and submenu positions.
// These need extra specificity to override potentially inherited properties.
.wp-block.wp-block-navigation {
.wp-block-navigation.wp-block-navigation {

// Menu items with no background.
.wp-block-page-list,
Expand All @@ -214,45 +222,46 @@
margin: 0 0.5em 0 0;
}

.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
.wp-block-page-list .wp-block-pages-list__item__link,
.wp-block-navigation__container .wp-block-navigation-link__content {
padding: 0.5em 1em;
}
}

// Margins in submenus.
// Spacing in all submenus.
.has-child .submenu-container,
.has-child .wp-block-navigation-link__container {
.wp-block-pages-list__item,
.wp-block-navigation-link {
margin: 0 0 1em 0;
margin: 0;
}

.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
padding: 0.5em 1em;
}

// Submenu indentation.
// Submenu indentation when there's no background.
left: -1em;
top: calc(100% + 1em);
top: 100%;

// Indentation for all submenus.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: calc(100% + 1em);
top: calc(-1px - 1em);
left: 100%;
top: -1px; // Border width.
}
}
}

// Submenu indentation when there's a background.
&.has-background .has-child .submenu-container,
&.has-background .has-child .wp-block-navigation-link__container {
.wp-block-pages-list__item,
.wp-block-navigation-link {
margin: 0;
padding: 0.5em 1em;
}

// Submenu indentation.
left: 0;
top: 100%;

// There's no border on submenus when there are backgrounds.
@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
Expand All @@ -274,8 +283,5 @@
background-color: #fff;
color: #000;
border: 1px solid rgba(0, 0, 0, 0.15);

// Add some padding to menus even if the parent menu item doesn't have.
padding: 1em;
}
}