SubMenu adjustments to achieve a bit of #21.

This commit is contained in:
Mateus Machado Luna 2019-10-28 16:49:20 -03:00
parent af4f257743
commit e3684f1a48
3 changed files with 64 additions and 28 deletions

View File

@ -130,10 +130,7 @@ jQuery( document ).ready(function( $ ) {
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
if($subMenu.hasClass('show')) {
$subMenu.find('.dropdown-submenu').attr('style', 'padding-left: 3rem !important');
$subMenu.find('.dropdown-item').attr('style', 'padding-left: 3rem');
}
return false;
});

View File

@ -98,26 +98,44 @@ body.loading-content main:before {
}
}
.menu-item-has-children {
.dropdown-submenu {
padding: 0.35rem 0 0.35rem 0.5rem !important;
margin-left: 0.5rem;
}
.dropdown-menu {
.show {
border-top: none;
margin-left: -1px;
}
}
.dropdown.menu-item-has-children {
display: inline-flex;
flex-wrap: wrap;
.dropdown-submenu {
padding: 0.35rem 0 0.35rem 0.5rem;
}
ul.show {
li {
&.current_page_item, &.current-menu-item{
&.current_page_item, &.current-menu-item {
> a {
border-bottom: 1px solid #298596;
border: none;
background-color: #d9eced;
}
}
.dropdown-menu {
&.show {
position: relative;
width: 100%;
margin-left: 8px;
border-left: none !important;
border-right: none !important;
animation: sub-menu-expand 0.5s linear;
}
}
}
}
@media screen and (max-width: 768px) {
display: flex;
ul.show {
position: relative;
width: 100%;
top: 0;
margin-left: 16px;
border-left: none !important;
border-right: none !important;
animation: sub-menu-expand 0.5s linear;
}
}
}
@ -270,10 +288,8 @@ nav{
.tainacan-icon-close { display: block !important; }
}
}
.dropdown-menu .menu-item {
&:hover .dropdown-item {
background-color: #cbcbcb;
}
.dropdown-item:hover {
background-color: #dbdbdb !important;
}
&.menu-belowheader{
@media only screen and (min-width: 992px){
@ -285,7 +301,7 @@ nav{
&.menu-item {
padding-right: 60px;
a{
a {
font-size: 0.875rem;
font-weight: 400;
color: #000;
@ -296,10 +312,10 @@ nav{
margin-left: 10px;
margin-bottom: -2px;
}
&:hover{
&:hover {
color: #000;
&:before {
&::before {
content: "";
width: 100%;
height: 1px;
@ -308,8 +324,8 @@ nav{
display: block;
position: absolute;
left: 0;
bottom: 0.5rem;
background-color: #298596;;
bottom: 0.375rem;
background-color: #298596;
}
}
&.dropdown-item {
@ -335,8 +351,9 @@ nav{
> a {
border-bottom: 1px solid #298596;
padding: 0;
margin-right: 0.5rem;
margin-top: 0.5rem;
padding-right: .5rem;
padding-left: .5rem;
&:hover:before { bottom: 0; }
}
@ -357,7 +374,7 @@ nav{
& > ul > li.menu-item a {
margin: 0;
padding: 3px 12px;
padding: 0.625rem 1.5rem !important;
&:before { display: none !important; }
@ -421,6 +438,7 @@ nav{
nav.menu-belowheader #menubelowHeader > ul > li.menu-item a {
max-width: 240px;
width: 100%;
overflow: hidden;
}
@ -809,6 +827,20 @@ nav{
}
}
// Sub menu animation for menu headers
@keyframes sub-menu-expand {
from {
overflow-y: hidden;
opacity: 0.5;
max-height: 0px;
}
to {
overflow-y: auto;
opacity: 1;
max-height: 600px;
}
}
@import "_gutenberg-support";
@import "_comments";

7
src/style.css.map Normal file

File diff suppressed because one or more lines are too long