Skip to content

Commit

Permalink
Fix lint errors.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tellthemachines
tellthemachines committed Aug 30, 2021
1 parent a3968b2 commit fc462ba
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 47 deletions.
38 changes: 16 additions & 22 deletions packages/block-library/src/navigation/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
display: inline-block;
}


/**
* Submenus.
*/
Expand All @@ -35,8 +36,7 @@
}

// Only show the flyout on hover if the parent menu item is selected.
.wp-block-navigation:not( .is-selected ):not( .has-child-selected )
.has-child:hover {
.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
> .wp-block-navigation__submenu-container {
opacity: 0;
visibility: hidden;
Expand Down Expand Up @@ -72,9 +72,7 @@
flex-direction: column;
}

.is-dragging-components-draggable
.wp-block-navigation-link
> .wp-block-navigation__container {
.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
// Set opacity to 1 to still be able to show the draggable chip.
opacity: 1;
visibility: hidden;
Expand Down Expand Up @@ -118,7 +116,7 @@ $colors-selector-size: 22px;

// colors-selector - selection status.
border-radius: $colors-selector-size * 0.5;
box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.2 );
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);

width: $colors-selector-size;
min-width: $colors-selector-size;
Expand Down Expand Up @@ -168,6 +166,7 @@ $color-control-label-height: 20px;
justify-content: flex-start;
}


/**
* Setup state
*/
Expand Down Expand Up @@ -222,7 +221,7 @@ $color-control-label-height: 20px;

&::before {
display: block;
content: '';
content: "";
border-radius: $radius-block-ui;
background: currentColor;
height: $grid-unit-20;
Expand All @@ -237,6 +236,7 @@ $color-control-label-height: 20px;
}
}


.wp-block-navigation-item.wp-block-navigation-item,
.wp-block-navigation-placeholder__preview-search-icon {
opacity: 0.3;
Expand Down Expand Up @@ -348,8 +348,7 @@ $color-control-label-height: 20px;
.is-vertical .wp-block-navigation-placeholder,
.is-vertical .wp-block-navigation-placeholder__preview,
.is-vertical .wp-block-navigation-placeholder__controls {
min-height: $icon-size +
( $grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15 ) * 3;
min-height: $icon-size + ($grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15) * 3;
}

.is-vertical .wp-block-navigation-placeholder__preview,
Expand All @@ -364,8 +363,7 @@ $color-control-label-height: 20px;
font-family: $default-font;

.components-button.components-dropdown-menu__toggle.has-icon {
padding: ( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
$grid-unit-15;
padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) $grid-unit-15;
display: flex;
flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
}
Expand All @@ -377,12 +375,13 @@ $color-control-label-height: 20px;
}
}


/**
* Mobile menu.
*/

// These needs extra specificity in the editor.
.wp-block-navigation__responsive-container:not( .is-menu-open ) {
.wp-block-navigation__responsive-container:not(.is-menu-open) {
.components-button.wp-block-navigation__responsive-container-close {
@include break-small {
display: none;
Expand All @@ -401,8 +400,7 @@ $color-control-label-height: 20px;
// When not fullscreen.
.wp-block-navigation__responsive-container.is-menu-open {
position: fixed;
top: $admin-bar-height-big + $header-height + $block-toolbar-height +
$border-width;
top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;

@include break-medium() {
top: $admin-bar-height + $header-height + $border-width;
Expand All @@ -419,15 +417,13 @@ $color-control-label-height: 20px;

.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
@include break-medium() {
top: $admin-bar-height + $header-height + $block-toolbar-height +
$border-width;
top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
}
}

.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
top: $admin-bar-height + $header-height + $block-toolbar-height +
$border-width;
top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
}

.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
Expand All @@ -438,8 +434,7 @@ $color-control-label-height: 20px;
.is-fullscreen-mode {
.wp-block-navigation__responsive-container.is-menu-open {
left: 0; // Unset the value from non fullscreen mode.
top: $admin-bar-height-big + $header-height + $block-toolbar-height +
$border-width;
top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;

@include break-medium() {
top: $header-height + $border-width;
Expand All @@ -459,8 +454,7 @@ $color-control-label-height: 20px;
}

// The iframe makes these rules a lot simpler.
body.editor-styles-wrapper
.wp-block-navigation__responsive-container.is-menu-open {
body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
top: 0;
right: 0;
bottom: 0;
Expand Down
48 changes: 23 additions & 25 deletions packages/block-library/src/navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@

// Force links to inherit text decoration applied to navigation block.
// The extra selector adds specificity to ensure it works when user-set.
&[style*='text-decoration'] {
&[style*="text-decoration"] {
.wp-block-navigation-item,
.wp-block-navigation__submenu-container {
text-decoration: inherit;
Expand All @@ -67,7 +67,7 @@
}
}

&:not( [style*='text-decoration'] ) {
&:not([style*="text-decoration"]) {
a {
text-decoration: none;

Expand All @@ -92,13 +92,14 @@
}
}


// Styles for submenu flyout.
// These are separated out with reduced specificity to allow better inheritance from Global Styles.
.wp-block-navigation .has-child {
// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
// That way if padding is set in theme.json, it still wins.
// https://css-tricks.com/almanac/selectors/w/where/
:where( .wp-block-navigation__submenu-container ) {
:where(.wp-block-navigation__submenu-container) {
background-color: inherit;
color: inherit;
position: absolute;
Expand Down Expand Up @@ -146,7 +147,7 @@

// Prevent the menu from disappearing when the mouse is over the gap
&::before {
content: '';
content: "";
position: absolute;
right: 100%;
height: 100%;
Expand All @@ -158,11 +159,12 @@

// Reset the submenu indicator for horizontal flyouts.
.wp-block-navigation__submenu-icon svg {
transform: rotate( -90deg );
transform: rotate(-90deg);
}
}
}


// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
// We will need to replace focus-within with a JS solution for IE keyboard support.

Expand All @@ -181,9 +183,7 @@
}

// Submenu indentation when there's a background.
.wp-block-navigation.has-background
.has-child
.wp-block-navigation__submenu-container {
.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
left: 0;
top: 100%;

Expand All @@ -196,6 +196,7 @@
}
}


/**
* Margins
* @todo: refactor this to use gap.
Expand All @@ -217,7 +218,7 @@
// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
// That way if padding is set in theme.json, it still wins.
// https://css-tricks.com/almanac/selectors/w/where/
.wp-block-navigation:where( .has-background ) {
.wp-block-navigation:where(.has-background) {
.wp-block-page-list,
.wp-block-page-list > .wp-block-navigation-item,
.wp-block-navigation__container > .wp-block-navigation-item {
Expand All @@ -230,6 +231,7 @@
}
}


/**
* Paddings
*/
Expand All @@ -245,32 +247,28 @@

// When the menu has a background, items have paddings, reduce margins to compensate.
// Treat margins and paddings differently when the block has a background.
.wp-block-navigation:where( .has-background ) a {
.wp-block-navigation:where(.has-background) a {
padding: 0.5em 1em;
}

// Provide a default padding for submenus who should always have some, regardless of the top level menu items.
.wp-block-navigation :where( .wp-block-navigation__submenu-container ) a {
.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
padding: 0.5em 1em;
}


/**
* Justifications.
*/

// When justified space-between, open submenus leftward for last menu item.
// When justified right, open all submenus leftwards.
// This needs high specificity.
.wp-block-navigation.items-justified-space-between
.wp-block-page-list
> .has-child:last-child,
.wp-block-navigation.items-justified-space-between
> .wp-block-navigation__container
> .has-child:last-child,
.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
.wp-block-navigation.items-justified-right
> .wp-block-navigation__container
.has-child {
.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child {

// First submenu.
.wp-block-navigation__submenu-container {
left: auto;
Expand All @@ -285,15 +283,15 @@
}

// Default background and font color.
.wp-block-navigation:not( .has-background ) {
.wp-block-navigation:not(.has-background) {
.wp-block-navigation__submenu-container {
// Set a background color for submenus so that they're not transparent.
// NOTE TO DEVS - if refactoring this code, please double-check that
// submenus have a default background color, this feature has regressed
// several times, so care needs to be taken.
background-color: #fff;
color: #000;
border: 1px solid rgba( 0, 0, 0, 0.15 );
border: 1px solid rgba(0, 0, 0, 0.15);
}
}

Expand Down Expand Up @@ -354,6 +352,7 @@
}
}


/**
* Mobile menu.
*/
Expand Down Expand Up @@ -412,7 +411,7 @@
}

@include break-small() {
&:not( .is-menu-open ) {
&:not(.is-menu-open) {
display: flex;
flex-direction: row;
position: relative;
Expand All @@ -434,8 +433,7 @@
}

// Default menu background and font color.
.wp-block-navigation:not( .has-background )
.wp-block-navigation__responsive-container.is-menu-open {
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
background-color: #fff;
color: #000;
}
Expand Down

0 comments on commit fc462ba

Please sign in to comment.