xarxaprod-wp-theme/sass/components/navigation/_navigation.scss

307 lines
5.2 KiB
SCSS

@media screen {
.hide-content {
display: block;
width: 0px;
height:0px;
margin: 0;
padding:0;
overflow:hidden;
}
.custom-logo {
min-width: 60vw;
margin: 1rem;
}
.main-navigation,.secondary-navigation {
.main-navigation-content {
display: none;
}
}
.main-navigation {
&.toggled {
ul {
display: block;
position: relative;
}
.menu-toggle {
position: relative;
z-index: 999;
}
.main-navigation-content {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
padding: 4rem;
background-color: rgba(255,255,255,0.95);
overflow: auto;
}
li {
display: block;
}
a {
display: block;
min-height: 100%;
padding: 0.5em 0;
}
.current-menu-ancestor > a::after {
background-color: transparent;
}
.current-menu-item > a::after {
display: inline-block;
content: "";
position: absolute;
left: 0;
top: 2em;
height: 2px;
width: 100%;
background-color: $color__black;
}
}
}
.secondary-navigation {
}
.menu-item-has-children {
}
/* begin of menu-hidden */
//.toggle-secondary-navigation .show-mobile{
// display:inherit;
//}
//.toggle,
//.toggled-menu {
// display: none;
//}
//.toggle:checked+.toggled-menu{
// display: block;
// position: absolute;
// left:0;
// top:0;
// width: 100%;
// height: 100vh;
// margin-top: 0;
// padding: 0 2rem;
//}
//.toggle-show {
// position: relative;
// display: inline-block;
// width: 1.8em;
// height: 1.4em;
// margin-right: 0.3em;
// border-top: 0.3em solid $color__black;
// border-bottom: 0.3em solid $color__black;
//}
//.toggle-show::before {
// content: "";
// position: absolute;
// top: 0.3em;
// left: 0;
// width: 100%;
// border-top: 0.3em solid $color__black;
//}
//.toggle-hide {
// display: flex;
// justify-content: end;
// margin-right: -0.5em;
//}
//.toggle-hide::after{
// content: "x";
// padding: 0;
// font-size: 3rem;
// font-weight: bold;
//}
/* end of menu hidden*/
}
@media screen and (max-width: 48em) {
.site-branding {
}
.main-navigation-content {
li {
}
}
.secondary-navigation-content {
}
}
@media screen and (min-width: 48em) {
.site-branding {
}
.custom-logo {
min-width: 16rem;
margin: 1rem 1rem 1rem 0;
}
.menu-toggle {
display: none;
}
.main-navigation,.secondary-navigation {
.main-navigation-content {
display: inline-block;
}
ul {
display: flex;
flex-flow: row;
.menu-item-has-children > ul {
background-color: rgba(255,255,255,0.95);
box-shadow: -4px 4px 15px #999;
border-radius: 0.2em;
}
ul.sub-menu {
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
padding: 0.5rem;
ul {
left: -999em;
top: 0;
}
li {
&:hover > ul,
&.focus > ul {
display: block;
left: 4em;
top: 3em;
}
}
a {
display: flex;
align-items: center;
min-height: 100%;
width: 200px;
}
}
li {
position: relative;
padding: 1em;
&:hover > ul,
&.focus > ul {
left: auto;
}
&.lang-item {
position: absolute;
right: -3rem;
float: none;
font-weight: 100;
}
}
a {
display: flex;
align-items: center;
min-height: 100%;
text-decoration: none;
font-size: 1rem;
}
}
}
.main-navigation {
padding-bottom: 1em;
ul {
justify-content: end;
ul.sub-menu {
flex-direction: column;
li {
}
}
}
.current-menu-ancestor > a::after,
.current-menu-item > a::after {
display: inline-block;
content: "";
position: absolute;
left: 1em;
bottom: 0.5em;
//min-height: 0.2em;
height: 2px;
width: calc(100% - 2em);
background-color: $color__black;
}
.menu-item-has-children {
ul {
}
}
}
.secondary-navigation {
padding: 1.5em 0;
}
.menu-item-has-children {
padding-right: 0.5em;
&::after {
content: "";
display: inline-block;
position: absolute;
top: 40%;
right: 0.3em;
width: 0.3em;
height: 0.3em;
border: 1px solid $color__black;
border-top: none;
border-left: none;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
&:hover {
&::after {
//border-color: $color__grey-dark;
}
}
}
/*
* css menu toggler
* */
.toggle-secondary-navigation .show-mobile,
.toggle-secondary-navigation .hide-not-mobile{
display: none;
}
.toggled-menu {
display: inherit;
}
/* end css menu toggler
* */
}
.comment-navigation,
.posts-navigation,
.post-navigation {
.site-main & {
margin: 0 0 1.5em;
align-self: end;
}
.nav-links {
display: flex;
}
.nav-previous {
flex: 1 0 50%;
}
.nav-next {
//text-align: end;
flex: 1 0 50%;
}
}
@media screen and (min-width: 80em) {
.main-navigation,.secondary-navigation {
.toggle-sidebar-segona .show-mobile,
.toggle-sidebar-segona .hide-not-mobile{
display:none;
}
//a {
// padding: 0 1rem;
//}
}
.main-navigation {
padding-bottom: 0;
}
}