Skip to content

Commit

Permalink
Navigation: Enable even more compact setup state. (#37089)
Browse files Browse the repository at this point in the history
  • Loading branch information
jasmussen committed Dec 28, 2021
1 parent b2a560a commit 434b108
Showing 1 changed file with 18 additions and 8 deletions.
26 changes: 18 additions & 8 deletions packages/block-library/src/navigation/editor.scss
Expand Up @@ -304,7 +304,6 @@ $color-control-label-height: 20px;

// Selected state.
.wp-block-navigation-placeholder__controls {
padding: $grid-unit-10;
border-radius: $radius-block-ui;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
Expand All @@ -313,11 +312,7 @@ $color-control-label-height: 20px;
display: none;
position: relative;
z-index: 1;

// Adjust padding for when shown horizontally.
.is-large & {
padding: $grid-unit-05 $grid-unit-10;
}
padding: $grid-unit-05 $grid-unit-10;

// If an ancestor has a text-decoration property applied, it is inherited regardless of
// the specificity of a child element. Only pulling the child out of the flow fixes it.
Expand All @@ -330,9 +325,19 @@ $color-control-label-height: 20px;
display: flex;
}

// Show stacked for the vertical navigation, or small placeholders.
.is-small &,
// Hide a few elements in medium size placeholders.
// @todo: part of the code here will be irrelevant if https://github.com/WordPress/gutenberg/pull/36775 lands.
.is-medium & {
.wp-block-navigation-placeholder__actions__indicator,
.wp-block-navigation-placeholder__actions__indicator + hr,
.wp-block-navigation-placeholder__actions > :nth-last-child(3), // Add all pages.
.wp-block-navigation-placeholder__actions > :nth-last-child(2) { // hr separator after it.
display: none;
}
}

// Show stacked for the vertical navigation, or small placeholders.
.is-small & {
.wp-block-navigation-placeholder__actions {
flex-direction: column;
}
Expand Down Expand Up @@ -366,6 +371,11 @@ $color-control-label-height: 20px;
}
}

// Keep as row for medium.
.wp-block-navigation .components-placeholder.is-medium .components-placeholder__fieldset {
flex-direction: row !important;
}

.wp-block-navigation-placeholder__actions {
display: flex;
font-size: $default-font-size;
Expand Down

0 comments on commit 434b108

Please sign in to comment.