Skip to content

Commit

Permalink
some hackyish fixes for setting up specificty order
Browse files Browse the repository at this point in the history
  • Loading branch information
mark-c-woodard committed Sep 1, 2024
1 parent 16ef9e2 commit 8dced55
Show file tree
Hide file tree
Showing 3 changed files with 43 additions and 66 deletions.
14 changes: 8 additions & 6 deletions includes/blocks/class-kadence-blocks-navigation-link-block.php
Original file line number Diff line number Diff line change
Expand Up @@ -339,18 +339,20 @@ public function sized_dynamic_styles( $css, $attributes, $unique_id, $size = 'De

//no added specificty needed for these variables
//these variable will slot into selectors found in the static stylesheet.

$css->set_selector( '.kb-nav-link-' . $unique_id );
$css->add_property( '--kb-nav-top-link-color', $css->render_color( $sized_attributes['linkColor'] ), $sized_attributes['linkColor'] );
$css->add_property( '--kb-nav-top-link-color-hover', $css->render_color( $sized_attributes['linkColorHover'] ), $sized_attributes['linkColorHover'] );
$css->add_property( '--kb-nav-top-link-color-active', $css->render_color( $sized_attributes['linkColorActive']), $sized_attributes['linkColorActive'] );
$css->add_property( '--kb-nav-top-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorActive']), $sized_attributes['parentActive'] && $sized_attributes['linkColorActive'] );

$css->add_property( '--kb-nav-dropdown-link-color', $css->render_color( $sized_attributes['linkColorDropdown'] ), $sized_attributes['linkColorDropdown'] );
$css->add_property( '--kb-nav-dropdown-link-color-hover', $css->render_color( $sized_attributes['linkColorDropdownHover'] ), $sized_attributes['linkColorDropdownHover'] );
$css->add_property( '--kb-nav-dropdown-link-color-active', $css->render_color( $sized_attributes['linkColorDropdownActive']), $sized_attributes['linkColorDropdownActive'] );
$css->add_property( '--kb-nav-dropdown-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorDropdownActive']), $sized_attributes['parentActive'] && $sized_attributes['linkColorDropdownActive'] );

//no bleed variables (extra specific to beat things like dropdown or top level styling)
$css->set_selector( '.kb-nav-link-' . $unique_id . ' > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap' );
$css->add_property( '--kb-nav-link-color', $css->render_color( $sized_attributes['linkColor'] ), $sized_attributes['linkColor'] );
$css->add_property( '--kb-nav-link-color-hover', $css->render_color( $sized_attributes['linkColorHover'] ), $sized_attributes['linkColorHover'] );
$css->add_property( '--kb-nav-link-color-active', $css->render_color( $sized_attributes['linkColorActive']), $sized_attributes['linkColorActive'] );
$css->add_property( '--kb-nav-link-color-active-ancestor', $css->render_color( $sized_attributes['linkColorActive']), $sized_attributes['parentActive'] && $sized_attributes['linkColorActive'] );


//additional dynamic logic, but still lands in a slot in the static stylesheet

// Styles For Links in Transparent Header.
Expand Down
23 changes: 11 additions & 12 deletions src/blocks/navigation-link/components/backend-styles/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -643,18 +643,6 @@ export default function BackendStyles(props) {
'--kb-nav-dropdown-margin',
marginDropdownUnit
);
css.add_property('--kb-nav-top-link-color', css.render_color(previewLinkColor), previewLinkColor);
css.add_property('--kb-nav-top-link-color-hover', css.render_color(previewLinkColorHover), previewLinkColorHover);
css.add_property(
'--kb-nav-top-link-color-active',
css.render_color(previewLinkColorActive),
previewLinkColorActive
);
css.add_property(
'--kb-nav-top-link-color-active-ancestor',
css.render_color(previewLinkColorActive),
previewLinkColorActive
);
css.add_property(
'--kb-nav-dropdown-link-color',
css.render_color(previewLinkColorDropdown),
Expand All @@ -676,6 +664,17 @@ export default function BackendStyles(props) {
previewLinkColorDropdownActive
);

//no bleed variables (extra specific to beat things like dropdown or top level styling)
css.set_selector(`.kb-nav-link-${uniqueID} > .kb-link-wrap.kb-link-wrap.kb-link-wrap.kb-link-wrap`);
css.add_property('--kb-nav-link-color', css.render_color(previewLinkColor), previewLinkColor);
css.add_property('--kb-nav-link-color-hover', css.render_color(previewLinkColorHover), previewLinkColorHover);
css.add_property('--kb-nav-link-color-active', css.render_color(previewLinkColorActive), previewLinkColorActive);
css.add_property(
'--kb-nav-link-color-active-ancestor',
css.render_color(previewLinkColorActive),
previewLinkColorActive
);

css.set_selector(
`.wp-block-kadence-navigation .menu-container > ul > li.menu-item.kb-nav-link-${uniqueID} > .kb-link-wrap`
);
Expand Down
72 changes: 24 additions & 48 deletions src/blocks/navigation/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -637,40 +637,29 @@
}

//only submenu nav links, don't bleed
.menu-item {
//active sub menu items
&.current-menu-item {
& > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-dropdown-link-color-active);
}
}
&.current-menu-ancestor {
& > .kb-link-wrap {
--kb-nav-link-color: var(
--kb-nav-dropdown-link-color-active-ancestor,
var(--kb-nav-link-color-active)
);
}
}

//standard sub menu items
& > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-dropdown-link-color);
& > .menu-item > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-dropdown-link-color);
--kb-nav-link-color-hover: var(--kb-nav-dropdown-link-color-hover);
--kb-nav-link-color-active: var(--kb-nav-dropdown-link-color-active);
--kb-nav-link-color-active-ancestor: var(--kb-nav-dropdown-link-color-active-ancestor);

& > .kb-nav-link-content {
width: var(--kb-nav-dropdown-link-width);

&:hover {
--kb-nav-link-color: var(--kb-nav-dropdown-link-color-hover);
}
}
& > .kb-nav-link-content {
width: var(--kb-nav-dropdown-link-width);
}
}
}

//menu item wrapper
.menu-item {
border-bottom: var(--kb-nav-link-border-bottom);

//active nav links (extra specificty to hack correct ordering against direct styling)
&.current-menu-item > .kb-link-wrap.kb-link-wrap.kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-link-color-active);
}
&.current-menu-ancestor > .kb-link-wrap.kb-link-wrap.kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-link-color-active-ancestor, var(--kb-nav-link-color-active));
}
}

// Mega Menu adjustments
Expand Down Expand Up @@ -761,28 +750,15 @@
}

//top level nav links only
.navigation > .menu-container > .menu > .menu-item {
//top level active items
&.current-menu-item {
& > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-top-link-color-active);
}
}
&.current-menu-ancestor {
& > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-top-link-color-active-ancestor, var(--kb-nav-top-link-color-active));
}
}

//top level standard items
& > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-top-link-color);
--kb-nav-link-color-hover: var(--kb-nav-top-link-color-hover);

& > .kb-nav-link-content {
display: flex;
align-items: center;
}
.menu-container > .menu > .menu-item > .kb-link-wrap {
--kb-nav-link-color: var(--kb-nav-top-link-color);
--kb-nav-link-color-hover: var(--kb-nav-top-link-color-hover);
--kb-nav-link-color-active: var(--kb-nav-top-link-color-active);
--kb-nav-link-color-active-ancestor: var(--kb-nav-top-link-color-active-ancestor);

& > .kb-nav-link-content {
display: flex;
align-items: center;
}
}

Expand Down

0 comments on commit 8dced55

Please sign in to comment.