From fc462ba292ba1fd7ebe8eff28784944839f5e322 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 30 Aug 2021 11:53:41 +1000 Subject: [PATCH] Fix lint errors. --- .../block-library/src/navigation/editor.scss | 38 +++++++-------- .../block-library/src/navigation/style.scss | 48 +++++++++---------- 2 files changed, 39 insertions(+), 47 deletions(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index da994f767bc01..e85c873c700e1 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -18,6 +18,7 @@ display: inline-block; } + /** * Submenus. */ @@ -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; @@ -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; @@ -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; @@ -168,6 +166,7 @@ $color-control-label-height: 20px; justify-content: flex-start; } + /** * Setup state */ @@ -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; @@ -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; @@ -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, @@ -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. } @@ -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; @@ -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; @@ -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 { @@ -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; @@ -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; diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 54ca0904e8479..59edade44dcfa 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -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; @@ -67,7 +67,7 @@ } } - &:not( [style*='text-decoration'] ) { + &:not([style*="text-decoration"]) { a { text-decoration: none; @@ -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; @@ -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%; @@ -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. @@ -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%; @@ -196,6 +196,7 @@ } } + /** * Margins * @todo: refactor this to use gap. @@ -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 { @@ -230,6 +231,7 @@ } } + /** * Paddings */ @@ -245,15 +247,16 @@ // 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. */ @@ -261,16 +264,11 @@ // 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; @@ -285,7 +283,7 @@ } // 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 @@ -293,7 +291,7 @@ // 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); } } @@ -354,6 +352,7 @@ } } + /** * Mobile menu. */ @@ -412,7 +411,7 @@ } @include break-small() { - &:not( .is-menu-open ) { + &:not(.is-menu-open) { display: flex; flex-direction: row; position: relative; @@ -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; }