Skip to content

Commit 4c13001

Browse files
jamesros161jamesros161
authored
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
1 parent 03185a4 commit 4c13001

21 files changed

+326
-198
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ user guide for more information.
3636

3737
## Changelog ##
3838

39+
### 2.18.0 ###
40+
* New Feature: Support for Crio Premium's MegaMenus feature.
41+
3942
### 2.17.3 ###
4043
* Update: Updated WooCommerce templates used by Crio [#148](https://github.com/BoldGrid/prime/issues/148)
4144
* Update: Add additional filters to support and upsell URLs.

‎gulpfile.js

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -369,9 +369,6 @@ gulp.task('scssDeps', function () {
369369
.pipe(replace("background: linear-gradient(top,", "background: linear-gradient("))
370370
.pipe(gulp.dest(config.dist + '/assets/scss/buttons'));
371371

372-
gulp.src(config.node_modules + '/smartmenus/dist/css/sm-core-css.css')
373-
.pipe(gulp.dest(config.dist + '/assets/css/smartmenus'));
374-
375372
// boldgrid-components.
376373
gulp.src('./node_modules/@boldgrid/components/dist/css/components.*')
377374
.pipe(gulp.dest(config.dist + '/assets/css'));
@@ -482,7 +479,7 @@ gulp.task('hovers', function() {
482479
digestType: 'base32',
483480
maxLength: 0,
484481
outputName: 'hover1',
485-
classnameFormat: '[classname] a:not( .button-primary):not( .button-secondary )',
482+
classnameFormat: '[classname] > a:not( .button-primary):not( .button-secondary )',
486483
type: '.json'
487484
})
488485
];
@@ -503,7 +500,7 @@ gulp.task('hoverColors', function() {
503500
digestType: 'base32',
504501
maxLength: 0,
505502
outputName: 'hover2',
506-
classnameFormat: '[classname]:not( .button-primary):not( .button-secondary ) a',
503+
classnameFormat: '[classname]:not( .button-primary):not( .button-secondary ) > a',
507504
type: '.json'
508505
}),
509506
require('postcss-prefix-selector')({ prefix: '%1$s' })

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "boldgrid-theme-framework",
3-
"version": "2.17.3",
3+
"version": "2.18.0",
44
"description": "BoldGrid Theme Framework",
55
"main": "index.js",
66
"engines": {

‎src/assets/js/customizer/color/preview.js

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -353,9 +353,9 @@ export class Preview {
353353
getSubActiveLinkColor( to, menuId ) {
354354
const color = new PaletteSelector().getColor( to );
355355
let css = `
356-
#${menuId} ul > .current-menu-item > a:not( .btn ),
357-
#${menuId} ul > .current-menu-ancestor > a:not( .btn ),
358-
#${menuId} ul > .current-menu-parent > a:not( .btn ) {
356+
#${menuId} ul.sub-menu > .current-menu-item > a:not( .btn ),
357+
#${menuId} ul.sub-menu > .current-menu-ancestor > a:not( .btn ),
358+
#${menuId} ul.sub-menu > .current-menu-parent > a:not( .btn ) {
359359
color: ${color};
360360
}`;
361361

@@ -434,10 +434,28 @@ export class Preview {
434434
}
435435

436436
css += '@media (min-width: 768px) {';
437-
css += `#${location}-menu.sm-clean ul {background-color: ${subcolorVariable};}`;
438-
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};}`;
439-
css += `#${location}-menu.sm-clean ul { border: 1px solid ${subcolorVariable};}`;
440-
css += `#${location}-menu.sm-clean > li > ul:before, #${location}-menu.sm-clean > li > ul:after { border-color: transparent transparent ${subcolorVariable} transparent;}`;
437+
css += `#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) {background-color: ${subcolorVariable};}`;
438+
css += `#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a,
439+
#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a:hover,
440+
#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a:focus,
441+
#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a:active,
442+
#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) li.menu-item:not(.custom-sub-menu) > a.highlighted,
443+
#${location}-menu.sm-clean span.scroll-up,
444+
#${location}-menu.sm-clean span.scroll-down,
445+
#${location}-menu.sm-clean span.scroll-up:hover,
446+
#${location}-menu.sm-clean span.scroll-down:hover {
447+
background-color: ${subcolorVariable};
448+
}`;
449+
css += `#${location}-menu.sm-clean ul.sub-menu:not(.custom-sub-menu) {
450+
border: 1px solid ${subcolorVariable};
451+
}`;
452+
css += `#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):before,
453+
#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu:not(.custom-sub-menu):after {
454+
border-color: transparent transparent ${subcolorVariable} transparent;
455+
}
456+
#${location}-menu.sm-clean > li.menu-item:not( .custom-sub-menu ) > ul.sub-menu.pointer-bottom:not(.custom-sub-menu):after {
457+
border-color: ${subcolorVariable} transparent transparent transparent;
458+
}`;
441459
css += '}';
442460

443461
return css;
@@ -562,7 +580,7 @@ export class Preview {
562580
},
563581
{
564582
name: `bgtfw_menu_items_border_color_${location}`,
565-
selector: `#${menuId} > li`,
583+
selector: `#${menuId} > li.menu-item`,
566584
properties: [ 'border-color' ]
567585
},
568586
{
@@ -572,7 +590,7 @@ export class Preview {
572590
},
573591
{
574592
name: `bgtfw_menu_submenu_background_${location}`,
575-
selector: `#${menuId} ul`,
593+
selector: `#${menuId} ul.sub-menu:not(.custom-sub-menu)`,
576594
properties: [ 'background-color' ]
577595
},
578596
{

‎src/assets/js/customizer/widget-preview.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,12 @@ BOLDGRID.CUSTOMIZER = BOLDGRID.CUSTOMIZER || {};
137137
};
138138

139139
var create_sections_selector = function() {
140+
var widgets = wp.customize.panel( 'widgets' );
141+
142+
if ( 'undefined' === typeof widgets ) {
143+
return;
144+
}
145+
140146
var sections = wp.customize.panel( 'widgets' ).sections();
141147

142148
var section_selector = '';

‎src/assets/js/front-end.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,12 @@ var BoldGrid = BoldGrid || {};
102102

103103
if ( $this.hasClass( 'button-primary' ) ) {
104104
$this.removeClass( 'button-primary' );
105-
$this.find( 'a' ).addClass( 'button-primary' );
105+
$this.children( 'a' ).addClass( 'button-primary' );
106106
}
107107

108108
if ( $this.hasClass( 'button-secondary' ) ) {
109109
$this.removeClass( 'button-secondary' );
110-
$this.find( 'a' ).addClass( 'button-secondary' );
110+
$this.children( 'a' ).addClass( 'button-secondary' );
111111
}
112112

113113
$this.removeClass( 'btn' );
@@ -117,7 +117,7 @@ var BoldGrid = BoldGrid || {};
117117
$this.removeClass( function( index, className ) {
118118
return ( className.match( /(^|\s)btn\S+/g ) || [] ).join( ' ' );
119119
} );
120-
$this.find( 'a' ).addClass( 'btn' );
120+
$this.children( 'a' ).addClass( 'btn' );
121121
} );
122122
},
123123

@@ -619,6 +619,13 @@ var BoldGrid = BoldGrid || {};
619619

620620
// Setup main navigation.
621621
setupMenu: function( sm ) {
622+
623+
// This has to be done here to ensure that the mega menus are configured before they are initialized.
624+
$( sm ).find( 'ul.custom-sub-menu' ).each( function() {
625+
$( this ).find( 'ul' ).addClass( 'in-mega' );
626+
$( this ).find( 'ul' ).dataSM( 'in-mega', true );
627+
} );
628+
622629
sm.smartmenus( {
623630
mainMenuSubOffsetX: -1,
624631
mainMenuSubOffsetY: 4,

‎src/assets/scss/boldgrid/_bootstrap-additions.scss

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,6 @@
108108
margin-bottom: -2px;
109109
}
110110

111-
.container .container {
112-
width: auto;
113-
}
114-
115111
/** Nav Tabs Default Styles **/
116112
.nav-tabs {
117113
border-bottom: 1px solid currentColor;
@@ -126,7 +122,8 @@
126122
}
127123

128124
// Nav menu.
129-
.nav > li {
125+
.nav > li,
126+
.widget > .nav > li {
130127
padding: 5px 0;
131128
&.cat-item > a {
132129
display: inline-block;

‎src/assets/scss/boldgrid/_elements.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ body.custom-background {
3434
display: flex;
3535
flex-direction: column;
3636
flex: 1 0 auto;
37+
z-index: 1;
3738
}
3839
@media only screen and (min-width: 768px) {
3940
.site-content {

‎src/assets/scss/boldgrid/_header.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,35 @@
88
margin-left: -15px;
99
margin-right: -15px;
1010
}
11-
.container, .container-fluid {
12-
padding-left: 0px;
13-
padding-right: 0px;
14-
}
15-
.boldgrid-section {
11+
> .boldgrid-section {
1612
display: flex;
1713
justify-content: center;
1814
flex-direction: column;
1915
align-items: center;
20-
.container-fluid {
16+
> .container-fluid {
2117
width: 100%;
2218
}
19+
> .container, > .container-fluid {
20+
padding-left: 0px;
21+
padding-right: 0px;
22+
}
2323
.row {
2424
display: flex;
2525
flex-wrap: wrap;
2626
}
27-
.full-width {
27+
> .full-width {
2828
padding-left: 0px;
2929
padding-right: 0px;
3030
width: 100%;
31-
.row {
31+
> .row {
3232
display: flex;
3333
flex-wrap: wrap;
3434
aside.sidebar {
3535
padding-left: 0px;
3636
padding-right: 0px;
3737
height: 100%;
3838
}
39-
div {
39+
> div {
4040
padding-left: 0px;
4141
padding-right: 0px;
4242
}

‎src/assets/scss/boldgrid/_inspiration-styles.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ body {
3131
left: 0;
3232
position: absolute;
3333
top: 0;
34-
z-index: 1;
34+
z-index: 2;
3535
opacity:0.35;
3636
pointer-events: none;
3737
}
@@ -42,7 +42,7 @@ body {
4242
position: absolute;
4343
right: 0;
4444
top: 0;
45-
z-index: 0;
45+
z-index: 1;
4646
opacity:0.35;
4747
pointer-events: none;
4848
}

0 commit comments

Comments
 (0)