From fd5c537e042498332488dfbc17be8e38e71ea327 Mon Sep 17 00:00:00 2001 From: Ben Ritner Date: Tue, 3 Sep 2024 17:48:37 -0600 Subject: [PATCH] small css fixes --- ...s-kadence-blocks-navigation-link-block.php | 6 +- .../components/backend-styles/index.js | 7 +- src/blocks/navigation-link/edit.js | 1 - src/blocks/navigation/edit-inner.js | 139 +++++++++--------- src/blocks/navigation/style.scss | 30 ++-- 5 files changed, 91 insertions(+), 92 deletions(-) diff --git a/includes/blocks/class-kadence-blocks-navigation-link-block.php b/includes/blocks/class-kadence-blocks-navigation-link-block.php index 5509f368a..114c0285d 100644 --- a/includes/blocks/class-kadence-blocks-navigation-link-block.php +++ b/includes/blocks/class-kadence-blocks-navigation-link-block.php @@ -123,6 +123,9 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { $css->set_selector( '.kb-nav-link-' . $unique_id ); $css->render_measure_output( $nav_link_attributes, 'marginDropdown', '--kb-nav-dropdown-margin', ['unit_key' => 'marginDropdownUnit']); $css->render_measure_output( $nav_link_attributes, 'paddingDropdown', '--kb-nav-dropdown-padding', ['unit_key' => 'paddingDropdownUnit']); + if ( isset( $nav_link_attributes['dropdownShadow'][0]['enable'] ) && $nav_link_attributes['dropdownShadow'][0]['enable'] ) { + $css->add_property( '--kb-nav-dropdown-box-shadow', $css->render_shadow( $nav_link_attributes['dropdownShadow'][0] ) ); + } // .wp-block-kadence-navigation .navigation .menu-container ul xxx ul li.menu-item > .kb-link-wrap > a $css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container > ul li.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap > a' ); @@ -222,9 +225,6 @@ public function build_css( $attributes, $css, $unique_id, $unique_style_id ) { 'mobile_key' => 'dropdownBorderRadiusMobile', ) ); $css->render_border_styles( $nav_link_attributes, 'dropdownBorder' ); - if ( isset( $nav_link_attributes['dropdownShadow'][0]['enable'] ) && $nav_link_attributes['dropdownShadow'][0]['enable'] ) { - $css->add_property( 'box-shadow', $css->render_shadow( $nav_link_attributes['dropdownShadow'][0] ) ); - } // Dropdown link $css->set_selector( '.wp-block-kadence-navigation .navigation .menu-container ul .kb-nav-link-' . $unique_id . ' ul li.menu-item > .kb-link-wrap > a' ); diff --git a/src/blocks/navigation-link/components/backend-styles/index.js b/src/blocks/navigation-link/components/backend-styles/index.js index d435a62c5..a6626470c 100644 --- a/src/blocks/navigation-link/components/backend-styles/index.js +++ b/src/blocks/navigation-link/components/backend-styles/index.js @@ -655,11 +655,16 @@ export default function BackendStyles(props) { css.render_color(previewLinkColorDropdownActive), previewLinkColorDropdownActive ); + if (dropdownShadow?.[0]?.enable) { + css.add_property('--kb-nav-dropdown-box-shadow', css.render_shadow(dropdownShadow[0])); + } css.add_property('--kb-nav-dropdown-background', css.render_color(previewBackgroundDropdown)); css.add_property('--kb-nav-dropdown-link-background-hover', css.render_color(previewBackgroundDropdownHover)); css.add_property('--kb-nav-dropdown-link-background-active', css.render_color(previewBackgroundDropdownActive)); - css.add_property('width', previewDropdownWidth + dropdownWidthUnit); + if (previewDropdownWidth) { + css.add_property('width', previewDropdownWidth + dropdownWidthUnit); + } css.add_property( '--kb-nav-dropdown-link-padding-top', css.render_size(previewDropdownVerticalSpacing, dropdownVerticalSpacingUnit) diff --git a/src/blocks/navigation-link/edit.js b/src/blocks/navigation-link/edit.js index 143cab636..ca899917d 100644 --- a/src/blocks/navigation-link/edit.js +++ b/src/blocks/navigation-link/edit.js @@ -1235,7 +1235,6 @@ export default function Edit(props) { )} {mediaContent} {description && {description}} - {/* {hasChildren && {ArrowDown}} */} {hasHighlightLabel && ( diff --git a/src/blocks/navigation/edit-inner.js b/src/blocks/navigation/edit-inner.js index 7ce30831a..55b7b3952 100644 --- a/src/blocks/navigation/edit-inner.js +++ b/src/blocks/navigation/edit-inner.js @@ -1394,60 +1394,6 @@ export function EditInner(props) { units={['px', 'em', 'rem', '%']} onUnit={(value) => setMetaAttribute(value, 'marginDropdownUnit')} /> - { - setMetaAttribute(value.map(String), 'paddingDropdownLink'); - }} - onChangeTablet={(value) => { - setMetaAttribute(value.map(String), 'tabletPaddingDropdownLink'); - }} - onChangeMobile={(value) => { - setMetaAttribute(value.map(String), 'mobilePaddingDropdownLink'); - }} - min={0} - max={ - paddingDropdownLinkUnit === 'em' || paddingDropdownLinkUnit === 'rem' - ? 24 - : paddingDropdownLinkUnit === 'px' - ? 200 - : 100 - } - step={paddingDropdownLinkUnit === 'em' || paddingDropdownLinkUnit === 'rem' ? 0.1 : 1} - unit={paddingDropdownLinkUnit} - units={['px', 'em', 'rem', '%']} - onUnit={(value) => setMetaAttribute(value, 'paddingDropdownLinkUnit')} - /> - { - setMetaAttribute(value.map(String), 'marginDropdownLink'); - }} - onChangeTablet={(value) => { - setMetaAttribute(value.map(String), 'tabletMarginDropdownLink'); - }} - onChangeMobile={(value) => { - setMetaAttribute(value.map(String), 'mobileMarginDropdownLink'); - }} - min={0} - max={ - marginDropdownLinkUnit === 'em' || marginDropdownLinkUnit === 'rem' - ? 24 - : marginDropdownLinkUnit === 'px' - ? 200 - : 100 - } - step={marginDropdownLinkUnit === 'em' || marginDropdownLinkUnit === 'rem' ? 0.1 : 1} - unit={marginDropdownLinkUnit} - units={['px', 'em', 'rem', '%']} - onUnit={(value) => setMetaAttribute(value, 'marginDropdownLinkUnit')} - /> - setMetaAttribute(value, 'dropdownDivider')} - onChangeTablet={(value) => setMetaAttribute(value, 'dropdownDividerTablet')} - onChangeMobile={(value) => setMetaAttribute(value, 'dropdownDividerMobile')} - /> - {previewOrientation != 'vertical' && ( )} - + + setMetaAttribute(value, 'dropdownDivider')} + onChangeTablet={(value) => setMetaAttribute(value, 'dropdownDividerTablet')} + onChangeMobile={(value) => setMetaAttribute(value, 'dropdownDividerMobile')} + /> + { + setMetaAttribute(value.map(String), 'paddingDropdownLink'); + }} + onChangeTablet={(value) => { + setMetaAttribute(value.map(String), 'tabletPaddingDropdownLink'); + }} + onChangeMobile={(value) => { + setMetaAttribute(value.map(String), 'mobilePaddingDropdownLink'); + }} + min={0} + max={ + paddingDropdownLinkUnit === 'em' || paddingDropdownLinkUnit === 'rem' + ? 24 + : paddingDropdownLinkUnit === 'px' + ? 200 + : 100 + } + step={paddingDropdownLinkUnit === 'em' || paddingDropdownLinkUnit === 'rem' ? 0.1 : 1} + unit={paddingDropdownLinkUnit} + units={['px', 'em', 'rem', '%']} + onUnit={(value) => setMetaAttribute(value, 'paddingDropdownLinkUnit')} + /> + { + setMetaAttribute(value.map(String), 'marginDropdownLink'); + }} + onChangeTablet={(value) => { + setMetaAttribute(value.map(String), 'tabletMarginDropdownLink'); + }} + onChangeMobile={(value) => { + setMetaAttribute(value.map(String), 'mobileMarginDropdownLink'); + }} + min={0} + max={ + marginDropdownLinkUnit === 'em' || marginDropdownLinkUnit === 'rem' + ? 24 + : marginDropdownLinkUnit === 'px' + ? 200 + : 100 + } + step={marginDropdownLinkUnit === 'em' || marginDropdownLinkUnit === 'rem' ? 0.1 : 1} + unit={marginDropdownLinkUnit} + units={['px', 'em', 'rem', '%']} + onUnit={(value) => setMetaAttribute(value, 'marginDropdownLinkUnit')} + /> {showSettings('fontSettings', 'kadence/navigation') && ( .sub-menu { + .menu-item:hover > .sub-menu, + .menu-item.menu-item--toggled-on > .sub-menu { @include show-sub-menu(); } @@ -197,17 +199,10 @@ } // This makes the dropdowns work a little better on a touch device. @media (hover: none) { - .menu-item--has-toggle:not(.menu-item--toggled-on) { + .menu-item--has-toggle { .kb-nav-dropdown-toggle-btn { - left: 0; - right: 0; - margin-right: 0; - width: 100%; pointer-events: all; } - & > .kb-link-wrap > a { - pointer-events: none; - } } } } @@ -284,6 +279,7 @@ .sub-menu { padding-left: 1em; transition: all 0.2s ease-in-out; + box-shadow: none; .menu-item > .kb-link-wrap > a { width: 100%;