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

311 lines
5.1 KiB
SCSS
Raw Normal View History

2024-01-09 16:13:20 +01:00
@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;
2024-01-14 17:12:37 +01:00
ul {
background-color: $color__white;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
flex-direction: column;
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
ul {
left: -999em;
top: 0;
}
li {
&:hover > ul,
&.focus > ul {
//display: block;
left: 30%;
top: 2.5rem;
}
}
a {
width: 200px;
}
:hover > a,
.focus > a {
}
a:hover,
a.focus {
}
}
li:hover > ul,
li.focus > ul {
left: auto;
}
2024-01-09 16:13:20 +01:00
}
li {
position: relative;
2024-01-14 17:12:37 +01:00
padding: 1rem;
2024-01-09 16:13:20 +01:00
&: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"]
2024-01-09 16:13:20 +01:00
{
font-family: $font__bold;
border-left: 1px solid $color__black;
}
}
.secondary-navigation {
2024-01-14 17:12:37 +01:00
padding: 1em 0;
2024-01-09 16:13:20 +01:00
ul {
display: inline-block;
li {
padding: 0.5em 0;
}
}
a {
2024-01-14 17:12:37 +01:00
// text-transform: uppercase;
2024-01-09 16:13:20 +01:00
}
}
.menu-item-has-children {
2024-01-14 17:12:37 +01:00
&::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__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;
}
}
2024-01-09 16:13:20 +01:00
}
/* begin of menu-hidden */
2024-01-14 17:12:37 +01:00
.toogle-secondary-navigation .show-mobile{
2024-01-09 16:13:20 +01:00
display:inherit;
}
2024-01-14 17:12:37 +01:00
.toogle,
.toogled-menu {
2024-01-09 16:13:20 +01:00
display: none;
}
2024-01-14 17:12:37 +01:00
.toogle:checked+.toogled-menu{
2024-01-09 16:13:20 +01:00
display: block;
position: absolute;
left:0;
top:0;
width: 100%;
height: 100vh;
margin-top: 0;
2024-01-14 17:12:37 +01:00
padding: 7em 4em 0 4em;
2024-01-09 16:13:20 +01:00
background-color: $color__white;
}
2024-01-14 17:12:37 +01:00
.toogle-show {
2024-01-09 16:13:20 +01:00
position: relative;
display: inline-block;
width: 1.8em;
height: 1.4em;
margin-right: 0.3em;
2024-01-14 17:12:37 +01:00
//border-top: 0.3em solid $color__black;
//border-bottom: 0.3em solid $color__black;
2024-01-09 16:13:20 +01:00
}
2024-01-14 17:12:37 +01:00
.toogle-show::before {
2024-01-09 16:13:20 +01:00
content: "";
position: absolute;
top: 0.3em;
left: 0;
width: 100%;
2024-01-14 17:12:37 +01:00
//border-top: 0.3em solid $color__black;
2024-01-09 16:13:20 +01:00
}
2024-01-14 17:12:37 +01:00
.toogle-hide {
2024-01-09 16:13:20 +01:00
display: flex;
2024-01-14 17:12:37 +01:00
justify-content: center;
2024-01-09 16:13:20 +01:00
}
2024-01-14 17:12:37 +01:00
.toogle-hide::after{
2024-01-09 16:13:20 +01:00
content: "x";
padding: 0;
font-size: 3rem;
font-weight: bold;
}
/* end of menu hidden*/
/* Small menu. */
2024-01-14 17:12:37 +01:00
.menu-toggle,
.main-navigation.toggled ul {
2024-01-09 16:13:20 +01:00
display: block;
}
2024-01-14 17:12:37 +01:00
.xarxaprod-filters {
.xarxaprod-filter {
//float: left;
}
}
2024-01-09 16:13:20 +01:00
}
@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;
}
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;
}
a[href^="http://localhost"],
a[href^="http://xarxaprod.cat"],
a[href^="https://xarxaprod.cat"]
2024-01-09 16:13:20 +01:00
{
font-family: $font__bold;
border-left:none;
}
a[href^="http://localhost"]::after,
a[href^="http://xarxaprod.cat"]::after,
a[href^="https://xarxaprod.cat"]::after,
2024-01-09 16:13:20 +01:00
.current-menu-item a::after {
2024-01-14 17:12:37 +01:00
//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;
2024-01-09 16:13:20 +01:00
}
}
.secondary-navigation {
padding: 1.5em 0;
}
2024-01-14 17:12:37 +01:00
/*
* css menu toogler
* */
.toogle-secondary-navigation .show-mobile,
.toogle-secondary-navigation .hide-not-mobile{
2024-01-09 16:13:20 +01:00
display: none;
}
2024-01-14 17:12:37 +01:00
.toogled-menu {
2024-01-09 16:13:20 +01:00
display: inherit;
}
2024-01-14 17:12:37 +01:00
/* end css menu toogler
2024-01-09 16:13:20 +01:00
* */
}
.comment-navigation,
.posts-navigation,
.post-navigation {
.site-main & {
margin: 0 0 1.5em;
}
.nav-links {
display: flex;
}
.nav-previous {
flex: 1 0 50%;
}
.nav-next {
2024-01-14 17:12:37 +01:00
text-align: end;
2024-01-09 16:13:20 +01:00
flex: 1 0 50%;
}
}
@media screen and (min-width: 80em) {
.main-navigation,.secondary-navigation {
2024-01-14 17:12:37 +01:00
.toogle-sidebar-segona .show-mobile,
.toogle-sidebar-segona .hide-not-mobile{
2024-01-09 16:13:20 +01:00
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,
2024-01-09 16:13:20 +01:00
.current-menu-item a::after {
margin-top: 5em;
}
}
}