diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 8f3d597301f830..18b726eaab8e60 100644 --- a/packages/block-library/src/navigation-link/style.scss +++ b/packages/block-library/src/navigation-link/style.scss @@ -220,43 +220,39 @@ } } - // Margins in submenus. + // Margins 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; + 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 { - left: 100%; top: 0; } } @@ -274,8 +270,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; } }