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

368 lines
6.0 KiB
SCSS

@media screen {
.hide-content {
display: block;
width: 0px;
height:0px;
margin: 0;
padding:0;
overflow:hidden;
}
.custom-logo {
min-width: 11rem;
margin: 1rem;
}
.main-navigation,.secondary-navigation {
ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
ul.sub-menu {
padding-top: 0.5rem;
padding-left: 1rem;
}
}
li {
position: relative;
&:hover > a,
&.focus > a {
}
}
a {
display: flex;
align-items: center;
min-height: 100%;
padding: 0 0.5rem;
text-decoration: none;
font-size: 1rem;
}
.current_page_item > a,
.current-menu-item > a,
.current_page_ancestor > a,
.current-menu-ancestor > a {
font-weight: bold;
font-family: $font__bold;
border-left: 1px solid $color__black;
}
}
.main-navigation {
a[href^="http://localhost"],
a[href^="http://xarxaprod.cat"],
a[href^="https://xarxaprod.cat"]
{
font-family: $font__bold;
border-left: 1px solid $color__black;
}
}
.secondary-navigation {
padding: 0 1em 1em 0;
ul {
display: inline-block;
li {
padding: 0.5em 0;
}
}
a {
text-transform: uppercase;
}
}
.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;
background-color: $color__white;
}
.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*/
/* Small menu. */
.main-navigation.toggled {
ul {
display: block;
}
.main-navigation-content {
display: inline-block;
position: absolute;
top: 5rem;
left: 0;
width: 100%;
height: calc(100vh - 5rem);
padding: 3rem;
background-color: $color__white;
}
}
.menu-toggle {
display: inline-block;
width: 10rem;
height: 4rem;
margin: 0;
padding: 0;
font-size: 0;
border: none;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
@media screen and (max-width: 47.99em) {
.site-branding {
display: block;
width: 0px;
height: 0px;
overflow: hidden;
margin: 0;
padding: 0;
}
.main-navigation-content {
text-transform: uppercase;
li {
padding: 0.5rem 0;
}
}
.secondary-navigation-content {
padding: 4rem 2rem;
}
}
@media screen and (min-width: 48em) {
.site-branding {
}
.custom-logo {
min-width: 11rem;
margin: 1rem 1rem 1rem 0;
}
.menu-toggle {
display: none;
}
.main-navigation,.secondary-navigation {
ul {
display: flex;
ul {
background-color: $color__white;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
ul {
left: -999em;
top: 0;
}
li {
&:hover > ul,
&.focus > ul {
display: block;
left: auto;
}
}
a {
width: 200px;
}
:hover > a,
.focus > a {
}
a:hover,
a.focus {
}
}
li:hover > ul,
li.focus > ul {
left: auto;
}
}
a {
padding: 0 0.5rem;
}
.current_page_item > a,
.current-menu-item > a,
.current_page_ancestor > a,
.current-menu-ancestor > a {
border-left: none;
}
}
.main-navigation {
padding-bottom: 1em;
ul {
justify-content: end;
ul.sub-menu {
flex-direction: column;
padding-top: 2rem;
padding-left: 1rem;
padding-bottom: 1rem;
li {
margin: 0.5rem 0;
}
}
}
a[href^="http://localhost"],
a[href^="http://xarxaprod.cat"],
a[href^="https://xarxaprod.cat"]
{
font-family: $font__bold;
border-left:none;
}
a[href^="http://localhost"]::after,
a[href^="http://xarxaprod.cat"]::after,
a[href^="https://xarxaprod.cat"]::after,
.current-menu-item a::after {
display: inline-block;
content: "";
position: absolute;
left: 5%;
min-height: 2px;
height: 100%;
width: 90%;
margin-top: 2.3em;
border-bottom: 0.3rem solid $color__black;
}
.menu-item-has-children {
ul {
}
}
}
.secondary-navigation {
padding: 1.5em 0;
}
.menu-item-has-children {
&::after {
content: "";
display: inline-block;
position: absolute;
top: 40%;
right: 0.3em;
//vertical-align: middle;
//margin: -3em 0 0.5em;
width: 0.3em;
height: 0.3em;
border: 1px solid $color__grey-light;
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;
a[href^="http://localhost"]::after,
a[href^="http://xarxaprod.cat"]::after,
a[href^="https://xarxaprod.cat"]::after,
.current-menu-item a::after {
margin-top: 5em;
}
}
}