Custom sub menus (#768)

* custom sub menu support * update versions for beta1 * fix UL / LI in custom sub menus * fix menu styles * update version for beta2 * add % based sub-menu sizing * fix offsets on sub-menus * adjust footer submenus to open upwards * add mobile rules * update versions for RC * fix UL styling within mega menus * Fix Button Padding * prevent sticky headers from going off screen * fix weforms not loading * fix sub menu background color * fix line height in mega menu items * update styles * update versions for RC * adjust z-indexing * remove resizing of menus * remove extra padding on links * fix megamenu links turning into buttons * fix padding on megamenu links * update rc3 version number * update color-classes.scss * update color-classes.scss * fix venetian overlays * final changes before merge
BoldGrid · Dec 7, 2022 · 4c13001 · 4c13001
1 parent 03185a4
commit 4c13001
Show file tree

Hide file tree

Showing 21 changed files with 326 additions and 198 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,9 @@ user guide for more information.
 
 ## Changelog ##
 
+### 2.18.0 ###
+* New Feature: Support for Crio Premium's MegaMenus feature.
+
 ### 2.17.3 ###
 * Update: Updated WooCommerce templates used by Crio [#148](https://github.com/BoldGrid/prime/issues/148)
 * Update: Add additional filters to support and upsell URLs.

diff --git a/gulpfile.js b/gulpfile.js
@@ -369,9 +369,6 @@ gulp.task('scssDeps', function () {
     .pipe(replace("background: linear-gradient(top,", "background: linear-gradient("))
     .pipe(gulp.dest(config.dist + '/assets/scss/buttons'));
 
-  gulp.src(config.node_modules + '/smartmenus/dist/css/sm-core-css.css')
-    .pipe(gulp.dest(config.dist + '/assets/css/smartmenus'));
-
   // boldgrid-components.
   gulp.src('./node_modules/@boldgrid/components/dist/css/components.*')
     .pipe(gulp.dest(config.dist + '/assets/css'));
@@ -482,7 +479,7 @@ gulp.task('hovers', function() {
       digestType: 'base32',
       maxLength: 0,
       outputName: 'hover1',
-      classnameFormat: '[classname] a:not( .button-primary):not( .button-secondary )',
+      classnameFormat: '[classname] > a:not( .button-primary):not( .button-secondary )',
       type: '.json'
     })
   ];
@@ -503,7 +500,7 @@ gulp.task('hoverColors', function() {
       digestType: 'base32',
       maxLength: 0,
       outputName: 'hover2',
-      classnameFormat: '[classname]:not( .button-primary):not( .button-secondary ) a',
+      classnameFormat: '[classname]:not( .button-primary):not( .button-secondary ) > a',
       type: '.json'
     }),
     require('postcss-prefix-selector')({ prefix: '%1$s' })

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "boldgrid-theme-framework",
-	"version": "2.17.3",
+	"version": "2.18.0",
 	"description": "BoldGrid Theme Framework",
 	"main": "index.js",
 	"engines": {

diff --git a/src/assets/js/customizer/color/preview.js b/src/assets/js/customizer/color/preview.js
@@ -353,9 +353,9 @@ export class Preview  {
 	getSubActiveLinkColor( to, menuId ) {
 		const color = new PaletteSelector().getColor( to );
 		let css = `
-		#${menuId} ul > .current-menu-item > a:not( .btn ),
-		#${menuId} ul > .current-menu-ancestor > a:not( .btn ),
-		#${menuId} ul > .current-menu-parent > a:not( .btn ) {
+		#${menuId} ul.sub-menu > .current-menu-item > a:not( .btn ),
+		#${menuId} ul.sub-menu > .current-menu-ancestor > a:not( .btn ),
+		#${menuId} ul.sub-menu > .current-menu-parent > a:not( .btn ) {
 			color: ${color};
 		}`;
 
@@ -434,10 +434,28 @@ export class Preview  {
 		}
 
 		css += '@media (min-width: 768px) {';
-		css += `#${location}-menu.sm-clean ul {background-color: ${subcolorVariable};}`;
-		css += `#${location}-menu.sm-clean ul a, #${location}-menu.sm-clean ul a:hover, #${location}-menu.sm-clean ul a:focus, #${location}-menu.sm-clean ul a:active, #${location}-menu.sm-clean ul a.highlighted, #${location}-menu.sm-clean span.scroll-up, #${location}-menu.sm-clean span.scroll-down, #${location}-menu.sm-clean span.scroll-up:hover, #${location}-menu.sm-clean span.scroll-down:hover {background-color: ${subcolorVariable};}`;
-		css += `#${location}-menu.sm-clean ul { border: 1px solid ${subcolorVariable};}`;
-		css += `#${location}-menu.sm-clean > li > ul:before, #${location}-menu.sm-clean > li > ul:after { border-color: transparent transparent ${subcolorVariable} transparent;}`;
+		css += `#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) {background-color: ${subcolorVariable};}`;
+		css += `#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a,
+			#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a:hover,
+			#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a:focus,
+			#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a:active,
+			#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a.highlighted,
+			#${location}-menu.sm-clean span.scroll-up,
+			#${location}-menu.sm-clean span.scroll-down,
+			#${location}-menu.sm-clean span.scroll-up:hover,
+			#${location}-menu.sm-clean span.scroll-down:hover {
+				background-color: ${subcolorVariable};
+			}`;
+		css += `#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) {
+			border: 1px solid ${subcolorVariable};
+			}`;
+		css += `#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):before,
+			#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):after {
+				border-color: transparent transparent ${subcolorVariable} transparent;
+			}
+			#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
+				border-color: ${subcolorVariable} transparent transparent transparent;
+			}`;
 		css += '}';
 
 		return css;
@@ -562,7 +580,7 @@ export class Preview  {
 			},
 			{
 				name: `bgtfw_menu_items_border_color_${location}`,
-				selector: `#${menuId} > li`,
+				selector: `#${menuId} > li.menu-item`,
 				properties: [ 'border-color' ]
 			},
 			{
@@ -572,7 +590,7 @@ export class Preview  {
 			},
 			{
 				name: `bgtfw_menu_submenu_background_${location}`,
-				selector: `#${menuId} ul`,
+				selector: `#${menuId} ul.sub-menu:not(.custom-sub-menu)`,
 				properties: [ 'background-color' ]
 			},
 			{

diff --git a/src/assets/js/customizer/widget-preview.js b/src/assets/js/customizer/widget-preview.js
@@ -137,6 +137,12 @@ BOLDGRID.CUSTOMIZER = BOLDGRID.CUSTOMIZER || {};
 	};
 
 	var create_sections_selector = function() {
+		var widgets = wp.customize.panel( 'widgets' );
+
+		if ( 'undefined' === typeof widgets ) {
+			return;
+		}
+
 		var sections = wp.customize.panel( 'widgets' ).sections();
 
 		var section_selector = '';

diff --git a/src/assets/js/front-end.js b/src/assets/js/front-end.js
@@ -102,12 +102,12 @@ var BoldGrid = BoldGrid || {};
 
 					if ( $this.hasClass( 'button-primary' ) ) {
 						$this.removeClass( 'button-primary' );
-						$this.find( 'a' ).addClass( 'button-primary' );
+						$this.children( 'a' ).addClass( 'button-primary' );
 					}
 
 					if ( $this.hasClass( 'button-secondary' ) ) {
 						$this.removeClass( 'button-secondary' );
-						$this.find( 'a' ).addClass( 'button-secondary' );
+						$this.children( 'a' ).addClass( 'button-secondary' );
 					}
 
 					$this.removeClass( 'btn' );
@@ -117,7 +117,7 @@ var BoldGrid = BoldGrid || {};
 					$this.removeClass( function( index, className ) {
 						return ( className.match( /(^|\s)btn\S+/g ) || [] ).join( ' ' );
 					} );
-					$this.find( 'a' ).addClass( 'btn' );
+					$this.children( 'a' ).addClass( 'btn' );
 				} );
 			},
 
@@ -619,6 +619,13 @@ var BoldGrid = BoldGrid || {};
 
 			// Setup main navigation.
 			setupMenu: function( sm ) {
+
+				// This has to be done here to ensure that the mega menus are configured before they are initialized.
+				$( sm ).find( 'ul.custom-sub-menu' ).each( function() {
+					$( this ).find( 'ul' ).addClass( 'in-mega' );
+					$( this ).find( 'ul' ).dataSM( 'in-mega', true );
+				} );
+
 				sm.smartmenus( {
 					mainMenuSubOffsetX: -1,
 					mainMenuSubOffsetY: 4,

diff --git a/src/assets/scss/boldgrid/_bootstrap-additions.scss b/src/assets/scss/boldgrid/_bootstrap-additions.scss
@@ -108,10 +108,6 @@
 	margin-bottom: -2px;
 }
 
-.container .container {
-	width: auto;
-}
-
 /** Nav Tabs Default Styles **/
 .nav-tabs {
 	border-bottom: 1px solid currentColor;
@@ -126,7 +122,8 @@
 }
 
 // Nav menu.
-.nav > li {
+.nav > li,
+.widget > .nav > li {
 	padding: 5px 0;
 	&.cat-item > a {
 		display: inline-block;

diff --git a/src/assets/scss/boldgrid/_elements.scss b/src/assets/scss/boldgrid/_elements.scss
@@ -34,6 +34,7 @@ body.custom-background {
 	display: flex;
 	flex-direction: column;
 	flex: 1 0 auto;
+	z-index: 1;
 }
 @media only screen and (min-width: 768px) {
 	.site-content {

diff --git a/src/assets/scss/boldgrid/_header.scss b/src/assets/scss/boldgrid/_header.scss
@@ -8,35 +8,35 @@
 		margin-left: -15px;
 		margin-right: -15px;
 	}
-	.container, .container-fluid {
-		padding-left: 0px;
-		padding-right: 0px;
-	}
-	.boldgrid-section {
+	> .boldgrid-section {
 		display: flex;
 		justify-content: center;
 		flex-direction: column;
 		align-items: center;
-		.container-fluid {
+		> .container-fluid {
 			width: 100%;
 		}
+		> .container, > .container-fluid {
+			padding-left: 0px;
+			padding-right: 0px;
+		}
 		.row {
 			display: flex;
 			flex-wrap: wrap;
 		}
-		.full-width {
+		> .full-width {
 			padding-left: 0px;
 			padding-right: 0px;
 			width: 100%;
-			.row {
+			> .row {
 				display: flex;
 				flex-wrap: wrap;
 				aside.sidebar {
 					padding-left: 0px;
 					padding-right: 0px;
 					height: 100%;
 				}
-				div {
+				> div {
 					padding-left: 0px;
 					padding-right: 0px;
 				}

diff --git a/src/assets/scss/boldgrid/_inspiration-styles.scss b/src/assets/scss/boldgrid/_inspiration-styles.scss
@@ -31,7 +31,7 @@ body {
 			left: 0;
 			position: absolute;
 			top: 0;
-			z-index: 1;
+			z-index: 2;
 			opacity:0.35;
 			pointer-events: none;
 		}
@@ -42,7 +42,7 @@ body {
 			position: absolute;
 			right: 0;
 			top: 0;
-			z-index: 0;
+			z-index: 1;
 			opacity:0.35;
 			pointer-events: none;
 		}