Skip to content

Commit 158dc1b

Browse files
mark-c-woodardmark-c-woodard
committed
updating the active ancestor styles so they only apply when the setting is enabled
https://stellarwp.atlassian.net/browse/KAD-5326
1 parent 8793c3f commit 158dc1b

File tree

1 file changed

+106
-83
lines changed

1 file changed

+106
-83
lines changed

‎src/blocks/navigation/style.scss‎

Lines changed: 106 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,6 @@ $link-color-property: var(
474474
&.menu-item--toggled-on {
475475
> .kb-link-wrap > .kb-nav-link-content:after {
476476
transform: scale(1, 1) translate(50%, 0);
477-
color: var(--kb-nav-link-color, inherit); !important;
478477
}
479478
}
480479
}
@@ -512,6 +511,93 @@ $link-color-property: var(
512511
}
513512
}
514513

514+
@mixin parent-active-styles {
515+
.menu-item {
516+
&.current-menu-ancestor > .kb-link-wrap.kb-link-wrap.kb-link-wrap {
517+
--kb-nav-link-color-active-lv: var(--kb-nav-link-color-active-ancestor, var(--kb-nav-link-color-active));
518+
--kb-nav-link-background-active-lv: var(
519+
--kb-nav-link-background-active-ancestor,
520+
var(--kb-nav-link-background-active)
521+
);
522+
--kb-nav-link-active-border-top-lv: var(
523+
--kb-nav-link-active-ancestor-border-top,
524+
var(--kb-nav-link-active-border-top)
525+
);
526+
--kb-nav-link-active-border-right-lv: var(
527+
--kb-nav-link-active-ancestor-border-right,
528+
var(--kb-nav-link-active-border-right)
529+
);
530+
--kb-nav-link-active-border-bottom-lv: var(
531+
--kb-nav-link-active-ancestor-border-bottom,
532+
var(--kb-nav-link-active-border-bottom)
533+
);
534+
--kb-nav-link-active-border-left-lv: var(
535+
--kb-nav-link-active-ancestor-border-left,
536+
var(--kb-nav-link-active-border-left)
537+
);
538+
--kb-nav-link-active-border-top-left-radius-lv: var(
539+
--kb-nav-link-active-ancestor-border-top-left-radius,
540+
var(--kb-nav-link-active-border-top-left-radius)
541+
);
542+
--kb-nav-link-active-border-top-right-radius-lv: var(
543+
--kb-nav-link-active-ancestor-border-top-right-radius,
544+
var(--kb-nav-link-active-border-top-right-radius)
545+
);
546+
--kb-nav-link-active-border-bottom-right-radius-lv: var(
547+
--kb-nav-link-active-ancestor-border-bottom-right-radius,
548+
var(--kb-nav-link-active-border-bottom-right-radius)
549+
);
550+
--kb-nav-link-active-border-bottom-left-radius-lv: var(
551+
--kb-nav-link-active-ancestor-border-bottom-left-radius,
552+
var(--kb-nav-link-active-border-bottom-left-radius)
553+
);
554+
--kb-nav-link-active-box-shadow-lv: var(
555+
--kb-nav-link-box-shadow-active-ancestor,
556+
var(--kb-nav-link-box-shadow-active)
557+
);
558+
--kb-nav-link-highlight-color-active-lv: var(--kb-nav-link-highlight-color-active-ancestor);
559+
--kb-nav-link-highlight-background-active-lv: var(--kb-nav-link-highlight-background-active-ancestor);
560+
--kb-nav-link-media-container-background-active-lv: var(
561+
--kb-nav-link-media-container-background-active-ancestor
562+
);
563+
--kb-nav-link-media-container-color-active-lv: var(--kb-nav-link-media-container-color-active-ancestor);
564+
--kb-nav-link-media-container-active-border-top-lv: var(
565+
--kb-nav-link-media-container-active-ancestor-border-top,
566+
var(--kb-nav-link-media-container-active-border-top)
567+
);
568+
--kb-nav-link-media-container-active-border-right-lv: var(
569+
--kb-nav-link-media-container-active-ancestor-border-right,
570+
var(--kb-nav-link-media-container-active-border-right)
571+
);
572+
--kb-nav-link-media-container-active-border-bottom-lv: var(
573+
--kb-nav-link-media-container-active-ancestor-border-bottom,
574+
var(--kb-nav-link-media-container-active-border-bottom)
575+
);
576+
--kb-nav-link-media-container-active-border-left-lv: var(
577+
--kb-nav-link-media-container-active-ancestor-border-left,
578+
var(--kb-nav-link-media-container-active-border-left)
579+
);
580+
--kb-nav-link-media-container-active-border-top-left-radius-lv: var(
581+
--kb-nav-link-media-container-active-ancestor-border-top-left-radius,
582+
var(--kb-nav-link-media-container-active-border-to-left-radiusp)
583+
);
584+
--kb-nav-link-media-container-active-border-top-right-radius-lv: var(
585+
--kb-nav-link-media-container-active-ancestor-border-top-right-radius,
586+
var(--kb-nav-link-media-container-active-border-top-right-radius)
587+
);
588+
--kb-nav-link-media-container-active-border-bottom-right-radius-lv: var(
589+
--kb-nav-link-media-container-active-ancestor-border-bottom-right-radius,
590+
var(--kb-nav-link-media-container-active-border-bottom-right-radius)
591+
);
592+
--kb-nav-link-media-container-active-border-bottom-left-radius-lv: var(
593+
--kb-nav-link-media-container-active-ancestor-border-bottom-left-radius,
594+
var(--kb-nav-link-media-container-active-border-bottom-left-radius)
595+
);
596+
--kb-nav-link-description-color-active-lv: var(--kb-nav-link-description-color-active-ancestor);
597+
}
598+
}
599+
}
600+
515601
.wp-block-kadence-navigation {
516602
max-width: 100%;
517603
box-sizing: border-box;
@@ -656,6 +742,25 @@ $link-color-property: var(
656742
}
657743
}
658744

745+
//desktop parent/ancestor active styles
746+
.navigation-desktop-parent-active-true {
747+
@media (min-width: vars.$laptop-plus-query) {
748+
@include parent-active-styles();
749+
}
750+
}
751+
//tablet parent/ancestor active styles
752+
.navigation-tablet-parent-active-true {
753+
@media (min-width: vars.$before-tablet-plus-query) and (max-width: vars.$tablet-minus-query) {
754+
@include parent-active-styles();
755+
}
756+
}
757+
//mobile parent/ancestor active styles
758+
.navigation-mobile-parent-active-true {
759+
@media (max-width: vars.$phone-minus-query) {
760+
@include parent-active-styles();
761+
}
762+
}
763+
659764
/*--------------------------------------------------------------
660765
## Header navigation menus. Base styles for menus, menu items, and their links
661766
--------------------------------------------------------------*/
@@ -844,88 +949,6 @@ $link-color-property: var(
844949
);
845950
--kb-nav-link-description-color-active-lv: var(--kb-nav-link-description-color-active);
846951
}
847-
&.current-menu-ancestor > .kb-link-wrap.kb-link-wrap.kb-link-wrap {
848-
--kb-nav-link-color-active-lv: var(--kb-nav-link-color-active-ancestor, var(--kb-nav-link-color-active));
849-
--kb-nav-link-background-active-lv: var(
850-
--kb-nav-link-background-active-ancestor,
851-
var(--kb-nav-link-background-active)
852-
);
853-
--kb-nav-link-active-border-top-lv: var(
854-
--kb-nav-link-active-ancestor-border-top,
855-
var(--kb-nav-link-active-border-top)
856-
);
857-
--kb-nav-link-active-border-right-lv: var(
858-
--kb-nav-link-active-ancestor-border-right,
859-
var(--kb-nav-link-active-border-right)
860-
);
861-
--kb-nav-link-active-border-bottom-lv: var(
862-
--kb-nav-link-active-ancestor-border-bottom,
863-
var(--kb-nav-link-active-border-bottom)
864-
);
865-
--kb-nav-link-active-border-left-lv: var(
866-
--kb-nav-link-active-ancestor-border-left,
867-
var(--kb-nav-link-active-border-left)
868-
);
869-
--kb-nav-link-active-border-top-left-radius-lv: var(
870-
--kb-nav-link-active-ancestor-border-top-left-radius,
871-
var(--kb-nav-link-active-border-top-left-radius)
872-
);
873-
--kb-nav-link-active-border-top-right-radius-lv: var(
874-
--kb-nav-link-active-ancestor-border-top-right-radius,
875-
var(--kb-nav-link-active-border-top-right-radius)
876-
);
877-
--kb-nav-link-active-border-bottom-right-radius-lv: var(
878-
--kb-nav-link-active-ancestor-border-bottom-right-radius,
879-
var(--kb-nav-link-active-border-bottom-right-radius)
880-
);
881-
--kb-nav-link-active-border-bottom-left-radius-lv: var(
882-
--kb-nav-link-active-ancestor-border-bottom-left-radius,
883-
var(--kb-nav-link-active-border-bottom-left-radius)
884-
);
885-
--kb-nav-link-active-box-shadow-lv: var(
886-
--kb-nav-link-box-shadow-active-ancestor,
887-
var(--kb-nav-link-box-shadow-active)
888-
);
889-
--kb-nav-link-highlight-color-active-lv: var(--kb-nav-link-highlight-color-active-ancestor);
890-
--kb-nav-link-highlight-background-active-lv: var(--kb-nav-link-highlight-background-active-ancestor);
891-
--kb-nav-link-media-container-background-active-lv: var(
892-
--kb-nav-link-media-container-background-active-ancestor
893-
);
894-
--kb-nav-link-media-container-color-active-lv: var(--kb-nav-link-media-container-color-active-ancestor);
895-
--kb-nav-link-media-container-active-border-top-lv: var(
896-
--kb-nav-link-media-container-active-ancestor-border-top,
897-
var(--kb-nav-link-media-container-active-border-top)
898-
);
899-
--kb-nav-link-media-container-active-border-right-lv: var(
900-
--kb-nav-link-media-container-active-ancestor-border-right,
901-
var(--kb-nav-link-media-container-active-border-right)
902-
);
903-
--kb-nav-link-media-container-active-border-bottom-lv: var(
904-
--kb-nav-link-media-container-active-ancestor-border-bottom,
905-
var(--kb-nav-link-media-container-active-border-bottom)
906-
);
907-
--kb-nav-link-media-container-active-border-left-lv: var(
908-
--kb-nav-link-media-container-active-ancestor-border-left,
909-
var(--kb-nav-link-media-container-active-border-left)
910-
);
911-
--kb-nav-link-media-container-active-border-top-left-radius-lv: var(
912-
--kb-nav-link-media-container-active-ancestor-border-top-left-radius,
913-
var(--kb-nav-link-media-container-active-border-to-left-radiusp)
914-
);
915-
--kb-nav-link-media-container-active-border-top-right-radius-lv: var(
916-
--kb-nav-link-media-container-active-ancestor-border-top-right-radius,
917-
var(--kb-nav-link-media-container-active-border-top-right-radius)
918-
);
919-
--kb-nav-link-media-container-active-border-bottom-right-radius-lv: var(
920-
--kb-nav-link-media-container-active-ancestor-border-bottom-right-radius,
921-
var(--kb-nav-link-media-container-active-border-bottom-right-radius)
922-
);
923-
--kb-nav-link-media-container-active-border-bottom-left-radius-lv: var(
924-
--kb-nav-link-media-container-active-ancestor-border-bottom-left-radius,
925-
var(--kb-nav-link-media-container-active-border-bottom-left-radius)
926-
);
927-
--kb-nav-link-description-color-active-lv: var(--kb-nav-link-description-color-active-ancestor);
928-
}
929952
}
930953

931954
// Mega Menu adjustments

0 commit comments

Comments
 (0)