small css fixes

stellarwp · Sep 3, 2024 · fd5c537 · fd5c537
1 parent d38a1da
commit fd5c537
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 92 deletions.
diff --git 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
@@ -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
@@ -1235,7 +1235,6 @@ export default function Edit(props) {
 							)}
 							{mediaContent}
 							{description && <span className="menu-label-description">{description}</span>}
-							{/* {hasChildren && <span className="kb-nav-dropdown-toggle">{ArrowDown}</span>} */}
 						</span>
 						{hasHighlightLabel && (
 							<span className="link-highlight-label">

diff --git 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')}
 							/>
-							<ResponsiveMeasureRangeControl
-								label={__('Padding Link', 'kadence-blocks')}
-								value={paddingDropdownLink}
-								tabletValue={tabletPaddingDropdownLink}
-								mobileValue={mobilePaddingDropdownLink}
-								onChange={(value) => {
-									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')}
-							/>
-							<ResponsiveMeasureRangeControl
-								label={__('Margin Link', 'kadence-blocks')}
-								value={marginDropdownLink}
-								tabletValue={tabletMarginDropdownLink}
-								mobileValue={mobileMarginDropdownLink}
-								onChange={(value) => {
-									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')}
-							/>
 							<ResponsiveBorderControl
 								label={__('Dropdown Border', 'kadence-blocks')}
 								value={dropdownBorder}
@@ -1474,21 +1420,6 @@ export function EditInner(props) {
 								isBorderRadius={true}
 								allowEmpty={true}
 							/>
-							<ResponsiveSingleBorderControl
-								label={'Divider'}
-								value={dropdownDivider}
-								tabletValue={dropdownDividerTablet}
-								mobileValue={dropdownDividerMobile}
-								onChange={(value) => setMetaAttribute(value, 'dropdownDivider')}
-								onChangeTablet={(value) => setMetaAttribute(value, 'dropdownDividerTablet')}
-								onChangeMobile={(value) => setMetaAttribute(value, 'dropdownDividerMobile')}
-							/>
-							<SmallResponsiveControl
-								label={'Colors'}
-								desktopChildren={styleColorControls('', 'Dropdown')}
-								tabletChildren={styleColorControls('Tablet', 'Dropdown')}
-								mobileChildren={styleColorControls('Mobile', 'Dropdown')}
-							></SmallResponsiveControl>
 							{previewOrientation != 'vertical' && (
 								<BoxShadowControl
 									label={__('Box Shadow', 'kadence-blocks')}
@@ -1578,7 +1509,75 @@ export function EditInner(props) {
 									}}
 								/>
 							)}
-
+							<SmallResponsiveControl
+								label={'Colors'}
+								desktopChildren={styleColorControls('', 'Dropdown')}
+								tabletChildren={styleColorControls('Tablet', 'Dropdown')}
+								mobileChildren={styleColorControls('Mobile', 'Dropdown')}
+							></SmallResponsiveControl>
+							<ResponsiveSingleBorderControl
+								label={'Divider'}
+								value={dropdownDivider}
+								tabletValue={dropdownDividerTablet}
+								mobileValue={dropdownDividerMobile}
+								onChange={(value) => setMetaAttribute(value, 'dropdownDivider')}
+								onChangeTablet={(value) => setMetaAttribute(value, 'dropdownDividerTablet')}
+								onChangeMobile={(value) => setMetaAttribute(value, 'dropdownDividerMobile')}
+							/>
+							<ResponsiveMeasureRangeControl
+								label={__('Padding Link', 'kadence-blocks')}
+								value={paddingDropdownLink}
+								tabletValue={tabletPaddingDropdownLink}
+								mobileValue={mobilePaddingDropdownLink}
+								onChange={(value) => {
+									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')}
+							/>
+							<ResponsiveMeasureRangeControl
+								label={__('Margin Link', 'kadence-blocks')}
+								value={marginDropdownLink}
+								tabletValue={tabletMarginDropdownLink}
+								mobileValue={mobileMarginDropdownLink}
+								onChange={(value) => {
+									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') && (
 								<KadencePanelBody
 									title={__('Typography Settings', 'kadence-blocks')}

diff --git a/src/blocks/navigation/style.scss b/src/blocks/navigation/style.scss
@@ -115,16 +115,16 @@
 		margin-left: 0;
 		z-index: 1000;
 		width: initial;
-
+		box-shadow: var(--kb-nav-dropdown-box-shadow, 0 2px 13px 0 rgba(0, 0, 0, 0.1));
 		--kb-nav-link-padding-top: 1em;
 		--kb-nav-link-padding-right: 1em;
 		--kb-nav-link-padding-bottom: 1em;
 		--kb-nav-link-padding-left: 1em;
 
-		//sub menus that aren't mega get a default box shadow
-		&:not(.mega-menu) {
-			box-shadow: var(--kb-nav-dropdown-box-shadow, 0 2px 13px 0 rgba(0, 0, 0, 0.1));
-		}
+		// //sub menus that aren't mega get a default box shadow
+		// &:not(.mega-menu) {
+		// 	box-shadow: var(--kb-nav-dropdown-box-shadow, 0 2px 13px 0 rgba(0, 0, 0, 0.1));
+		// }
 
 		&.sub-menu-edge {
 			left: auto;
@@ -162,9 +162,10 @@
 
 		//horizontal sub menu toggles
 		.kb-nav-dropdown-toggle-btn {
-			width: 2.6em;
-			margin: 0;
-			right: var(--kb-nav-dropdown-toggle-right, 0);
+			width: calc(var(--kb-nav-drop-icon-width, 1.6em) + var(--kb-nav-link-padding-right, 0.5em));
+			margin-inline-end: calc(
+				(var(--kb-nav-drop-icon-width, 1.6em) + var(--kb-nav-link-padding-right, 0.5em)) * -1
+			);
 
 			&:focus {
 				z-index: 10;
@@ -173,7 +174,8 @@
 	}
 
 	// Handle Reveal Animation for horizontal navs, hover only
-	.menu-item:hover > .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%;