IntenseWebs/gantry5
3
0
Fork 0
mirror of https://github.com/gantry/gantry5.git synced 2026-08-19 01:15:04 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added additional wrapper div to provide first level drop down offset capability

Browse Source
This commit is contained in:
Kevin DuCommun
2015-04-22 17:28:36 -05:00
parent dc408a3d19
commit 2901175bd4
3 changed files with 82 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
engines/common/nucleus/css-compiled/nucleus.css
+63 -55
View File
@@ -1248,24 +1248,33 @@ th {
-moz-transition: background 0.2s ease-out, -moz-transform 0.2s ease-out;
transition: background 0.2s ease-out, transform 0.2s ease-out;
}
/* line 27, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 28, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-toplevel > li > .g-dropdown-offset {
position: absolute;
top: 100%;
width: 100%;
left: 0;
right: 0;
z-index: 1;
}
/* line 37, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-toplevel > li .g-menu-item-content {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
/* line 33, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 43, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-toplevel > li .g-menu-item-container {
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
/* line 39, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 49, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator {
display: inline-block;
vertical-align: middle;
}
/* line 43, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 53, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator:after {
display: inline-block;
cursor: pointer;
@@ -1275,32 +1284,32 @@ th {
content: "\f078";
text-align: center;
}
/* line 56, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 66, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-toplevel > li.g-parent.g-selected > .g-menu-item-container > .g-menu-parent-indicator:after {
content: "\f00d";
}
/* line 67, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 77, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-dropdown {
-webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-out;
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
/* line 74, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 84, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-sublevel > li {
-webkit-transition: background 0.2s ease-out, -webkit-transform 0.2s ease-out;
-moz-transition: background 0.2s ease-out, -moz-transform 0.2s ease-out;
transition: background 0.2s ease-out, transform 0.2s ease-out;
}
/* line 77, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 87, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-sublevel > li .g-menu-item-content {
display: inline-block;
vertical-align: middle;
}
/* line 83, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 93, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-sublevel > li.g-parent .g-menu-item-content {
margin-right: 2rem;
}
/* line 86, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 96, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-sublevel > li.g-parent .g-menu-parent-indicator {
position: absolute;
right: 0.738rem;
@@ -1308,39 +1317,39 @@ th {
width: auto;
text-align: center;
}
/* line 93, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 103, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-sublevel > li.g-parent .g-menu-parent-indicator:after {
content: "\f054";
}
/* line 100, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 110, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-sublevel > li.g-parent.g-selected > .g-menu-item-container > .g-menu-parent-indicator:after {
content: "\f00d";
}
/* line 111, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 121, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-menu-item-container {
display: block;
position: relative;
}
/* line 118, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 128, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-standard {
position: relative;
}
/* line 121, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 131, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-standard .g-sublevel > li {
position: relative;
}
/* line 125, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 135, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-standard .g-dropdown {
top: 100%;
}
/* line 127, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 137, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-standard .g-dropdown .g-dropdown {
left: 100%;
top: 0;
}
/* line 132, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 142, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-standard .g-dropdown .g-block {
-webkit-box-flex: 0;
-moz-box-flex: 0;
@@ -1350,34 +1359,33 @@ th {
-ms-flex: 0 100%;
flex: 0 100%;
}
/* line 140, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 150, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-standard .g-go-back {
display: none;
}
/* line 149, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 159, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-dropdown {
position: absolute;
left: 0;
right: 0;
z-index: 1;
top: 100%;
}
/* line 155, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 165, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-dropdown .g-block {
width: 50%;
position: relative;
overflow: hidden;
}
/* line 166, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 176, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-dropdown .g-go-back {
display: block;
}
/* line 167, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 177, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-dropdown .g-go-back.g-level-1 {
display: none;
}
/* line 174, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 184, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-sublevel .g-dropdown {
top: 0;
-webkit-transform: translateX(100%);
@@ -1386,7 +1394,7 @@ th {
-o-transform: translateX(100%);
transform: translateX(100%);
}
/* line 177, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 187, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-sublevel .g-dropdown.g-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
@@ -1394,7 +1402,7 @@ th {
-o-transform: translateX(0);
transform: translateX(0);
}
/* line 183, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 193, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-main-nav .g-fullwidth .g-sublevel.g-slide-out > .g-menu-item > .g-menu-item-container {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
@@ -1403,15 +1411,15 @@ th {
transform: translateX(-100%);
}
/* line 194, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 204, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-go-back.g-level-1 {
display: none;
}
/* line 198, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 208, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-go-back a span {
display: none;
}
/* line 201, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 211, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-go-back a:before {
display: block;
text-align: center;
@@ -1421,19 +1429,19 @@ th {
opacity: 0.5;
}
/* line 214, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 224, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-menu-item-container i {
vertical-align: middle;
}
/* line 220, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 230, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-menu-item-subtitle {
display: block;
font-size: 0.8rem;
line-height: 1.1;
}
/* line 227, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 237, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-nav-overlay, .g-menu-overlay {
top: 0;
right: 0;
@@ -1447,36 +1455,36 @@ th {
transition: opacity 0.3s ease-out, z-index 0.1s ease-out;
}
/* line 244, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 254, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel {
position: relative;
}
/* line 246, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 256, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel li {
display: block;
margin-right: 0;
cursor: pointer;
}
/* line 251, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 261, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel li .g-menu-item-container {
padding: 0.938rem 1rem;
}
/* line 255, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 265, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel li .g-menu-item-content {
display: inline-block;
line-height: 1rem;
}
/* line 263, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 273, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel li.g-parent > .g-menu-item-container > .g-menu-item-content {
position: relative;
}
/* line 268, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 278, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel li.g-parent .g-menu-parent-indicator {
position: absolute;
right: 0.938rem;
text-align: center;
}
/* line 273, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 283, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel li.g-parent .g-menu-parent-indicator:after {
display: inline-block;
text-align: center;
@@ -1486,7 +1494,7 @@ th {
font-family: FontAwesome;
content: "\f054";
}
/* line 285, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 296, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown {
top: 0;
background: transparent;
@@ -1503,7 +1511,7 @@ th {
-o-transform: translateX(100%);
transform: translateX(100%);
}
/* line 294, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 305, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown.g-active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
@@ -1511,47 +1519,47 @@ th {
-o-transform: translateX(0);
transform: translateX(0);
}
/* line 297, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 308, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown .g-go-back {
display: block;
}
/* line 300, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 311, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown .g-block {
width: 100%;
overflow: visible;
}
/* line 303, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 314, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown .g-block .g-go-back {
display: none;
}
/* line 307, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 318, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown .g-block:first-child .g-go-back {
display: block;
}
/* line 313, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 324, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel .g-dropdown-column {
float: none;
padding: 0;
}
/* line 318, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 329, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-sublevel {
cursor: default;
}
/* line 320, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 331, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-sublevel li {
position: static;
}
/* line 323, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 334, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-sublevel .g-dropdown {
top: 0;
}
/* line 328, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 339, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-menu-item-container {
-webkit-transition: -webkit-transform 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
}
/* line 335, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 346, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-toplevel.g-slide-out > .g-menu-item > .g-menu-item-container, #g-mobilemenu-container .g-toplevel.g-slide-out > .g-go-back > .g-menu-item-container, #g-mobilemenu-container .g-sublevel.g-slide-out > .g-menu-item > .g-menu-item-container, #g-mobilemenu-container .g-sublevel.g-slide-out > .g-go-back > .g-menu-item-container {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
@@ -1559,18 +1567,18 @@ th {
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
/* line 342, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 353, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container .g-menu-item-subtitle {
line-height: 1.5;
}
/* line 345, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 356, engines/common/nucleus/scss/nucleus/_nav.scss */
#g-mobilemenu-container i {
float: left;
line-height: 1.4rem;
margin-right: 0.3rem;
}
/* line 352, engines/common/nucleus/scss/nucleus/_nav.scss */
/* line 363, engines/common/nucleus/scss/nucleus/_nav.scss */
.g-menu-overlay.g-menu-overlay-open {
z-index: 2;
position: fixed;
engines/common/nucleus/particles/menu.html.twig
+7 -5
View File
@@ -86,11 +86,13 @@
{% endmacro %}
{% macro displaySubmenu(item, menu, gantry) %}
<ul class="g-dropdown g-inactive">
<li class="g-dropdown-column">
{{ _self.displayContainers(item, menu, gantry) }}
</li>
</ul>
{% if item.level == 1 %}<div class="g-dropdown-offset">{% endif %}
<ul class="g-dropdown g-inactive">
<li class="g-dropdown-column">
{{ _self.displayContainers(item, menu, gantry) }}
</li>
</ul>
{% if item.level == 1 %}</div>{% endif %}
{% endmacro %}
<nav class="g-main-nav" role="navigation">
engines/common/nucleus/scss/nucleus/_nav.scss
+12 -1
View File
@@ -24,6 +24,16 @@
cursor: pointer;
@include transition(background .2s ease-out, transform .2s ease-out);
// First Level Dropdown Offset
> .g-dropdown-offset {
position: absolute;
top: 100%;
width: 100%;
left: 0;
right: 0;
z-index: 1;
}
.g-menu-item-content {
display: inline-block;
vertical-align: middle;
@@ -147,7 +157,7 @@
.g-main-nav {
.g-fullwidth {
.g-dropdown {
position: absolute;
//position: absolute;
left: 0;
right: 0;
z-index: 1;
@@ -282,6 +292,7 @@
}
}
}
.g-dropdown {
top: 0;
background: transparent;