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

Try: Remove padding from menu items when no background #30805

Merged
merged 2 commits into from
Apr 23, 2021
Merged

Try: Remove padding from menu items when no background #30805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a5df608
Try: Remove padding from menu items when no background
jasmussen Apr 13, 2021
05c8f69
Refactor margins and paddings.
jasmussen Apr 14, 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
99 changes: 78 additions & 21 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 @@ -8,26 +8,18 @@
display: flex;
align-items: center;
position: relative;
margin: 0 0.5em 0 0;

.wp-block-navigation-link__container:empty {
display: none;
}
}

// Margin of right-most margin should be zero, for right aligned or justified items.
.wp-block-navigation__container > .wp-block-pages-list__item:last-child,
.wp-block-navigation__container > .wp-block-navigation-link:last-child {
margin-right: 0;
}

// Menu item link.
.wp-block-pages-list__item__link,
.wp-block-navigation-link__content {
// Inherit colors set by the block color definition.
color: inherit;
display: block;
padding: 0.5em 1em;
}

// Force links to inherit text decoration applied to navigation block.
Expand Down Expand Up @@ -72,7 +64,6 @@
.wp-block-page-list__submenu-icon,
.wp-block-navigation-link__submenu-icon {
height: inherit;
padding: 0.375em 1em 0.375em 0;

svg {
stroke: currentColor;
Expand All @@ -91,8 +82,6 @@
background-color: inherit;
color: inherit;
position: absolute;
left: 0;
top: 100%;
z-index: 2;
display: flex;
flex-direction: column;
Expand All @@ -106,8 +95,6 @@

> .wp-block-pages-list__item,
> .wp-block-navigation-link {
margin: 0;

> .wp-block-pages-list__item__link,
> .wp-block-navigation-link__content {
flex-grow: 1;
Expand All @@ -119,13 +106,11 @@
}
}

// Nested submenus sit to the left on large breakpoints.
// On smaller breakpoints, they open vertically, accordion-style.
@include break-medium {
// Nested submenus sit to the left on large breakpoints.
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: 0;

// Prevent the menu from disappearing when the mouse is over the gap
&::before {
content: "";
Expand Down Expand Up @@ -204,6 +189,80 @@
}
}

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

// Menu items with no background.
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 2em 0 0;

// Margin of right-most margin should be zero, for right aligned or justified items.
&:last-child {
margin-right: 0;
}
}

// When the menu has a background, items have paddings, reduce margins to compensate.
// Treat margins and paddings differently when the block has a background.
&.has-background {
.wp-block-page-list,
.wp-block-page-list > .wp-block-pages-list__item,
.wp-block-navigation__container > .wp-block-navigation-link {
margin: 0 0.5em 0 0;
}

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

// Margins in 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;
}

// Submenu indentation.
left: -1em;
top: calc(100% + 1em);

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

&.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%;

@include break-medium {
.submenu-container,
.wp-block-navigation-link__container {
left: 100%;
top: 0;
}
}
}
}

// Default background and font color.
.wp-block-navigation:not(.has-background) {
.submenu-container, // This target items created by the Page List block.
Expand All @@ -216,9 +275,7 @@
color: #000;
border: 1px solid rgba(0, 0, 0, 0.15);

.submenu-container,
.wp-block-navigation-link__container {
top: -1px;
}
// Add some padding to menus even if the parent menu item doesn't have.
padding: 1em;
}
}
23 changes: 0 additions & 23 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,29 +11,6 @@
margin-left: 0;
padding-left: 0;
}

// Unset horizontal and vertical margin rules from editor normalization stylesheet.
// Both margin-left: auto; and margin-right: auto; from .wp-block, and also
// margin: revert; from .editor-styles-wrapper ul li.
.block-editor-block-list__block {
margin: 0;

// This CSS provides a little spacing between blocks.
// It matches a rule in style.scss exactly, but needs higher specificity due to the unsetting of inherited styles above.
&.wp-block-navigation-link {
margin: 0 0.5em 0 0;
}

&.has-child .block-editor-block-list__block.wp-block-navigation-link {
margin: 0;
}

// Margin of right-most margin should be zero, for right aligned or justified items.
&.wp-block-pages-list__item:last-child,
&.wp-block-navigation-link:last-child {
margin-right: 0;
}
}
}


Expand Down