WordPress/yuzu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Yuzu Theme

Browse Source 
from meowapps.com
This commit is contained in:
Bruno21
2022-05-03 09:37:05 +02:00
commit 523ccac38e
75 changed files with 15482 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

389
assets/less/_top-bar.less Normal file
View File

@@ -0,0 +1,389 @@
// main: style.less
.top-search-bar-container {
position: relative;
z-index: 99;
width: 100%;
height: 60px;
background: @top_bar_bg;
background: var(--top_bar_bg);
border-bottom: 1px solid rgba(0,0,0,.1);
margin-top: -60px;
transition: .2s;
&.opened {
margin-top: 0px;
transition: .3s;
}
.super-large-container {
position: relative;
height: 60px;
form {
input {
width: 100%;
line-height: 60px;
padding: 0;
border: none;
background: none;
outline: none;
font-size: 18px;
}
}
.submit-top-bar-search {
position: absolute;
right: 0;
top: 50%;
height: 30px;
margin-top: -15px;
cursor: pointer;
opacity: .5;
transition: .1s;
svg {
height: 30px;
width: 30px;
stroke: @top_bar_color;
stroke: var(--top_bar_color);
stroke-width: 2px;
cursor: pointer;
}
&:hover {
opacity: 1;
transition: .1s;
}
}
}
}
.site-header {
position: relative;
z-index: 99;
@header_height: 60px;
width: 100%;
background: @top_bar_bg;
background: var(--top_bar_bg);
height: @header_height;
box-shadow: @shadow;
box-shadow: var(--shadow);
.top-bar-content {
display: flex;
.site-branding {
flex: 1;
max-width: 300px;
.site-logo {
height: 50px;
margin-top: 5px;
a, img {
height: 100%;
width: auto;
}
}
.site-title {
font-size: 18px;
line-height: @header_height;
margin: 0;
a {
color: @top_bar_color;
color: var(--top_bar_color);
}
}
}
.site-navigation {
flex: 1;
line-height: @header_height;
text-align: right;
.menu-main-menu-container {
display: inline-block;
vertical-align: middle;
@media screen and (max-width: 860px) {
display: none;
}
}
ul {
margin: 0;
padding: 0;
li {
position: relative;
display: inline-block;
list-style: none;
margin-left: 10px;
font-weight: 400;
&.current-menu-item {
font-weight: 600;
a {
opacity: 1;
}
}
a {
color: @top_bar_color;
color: var(--top_bar_color);
opacity: .5;
}
&:hover {
a {
opacity: 1;
transition: .1s;
}
ul {
visibility: visible;
opacity: 1;
transition: .1s;
li a {
opacity: .5;
}
}
}
ul {
visibility: hidden;
opacity: 0;
position: absolute;
z-index: 999;
background: @top_bar_bg;
background: var(--top_bar_bg);
padding: 20px;
box-shadow: @shadow;
box-shadow: var(--shadow);
right: 0;
margin-top: -1px;
margin-right: -20px;
transition: .1s;
text-align: left;
li {
display: block;
margin: 0;
line-height: 30px;
white-space: nowrap;
&.current-menu-item {
a {
opacity: 1;
}
}
&:hover {
a {
opacity: 1;
}
}
ul, &.current-menu-item > ul, &:hover > ul {
position: relative;
padding: 10px 20px;
border-left: 1px solid rgba(0,0,0,.4);
box-shadow: none;
li {
display: block;
margin: 0;
line-height: 30px;
white-space: nowrap;
a {
opacity: .5;
}
&.current-menu-item {
a {
opacity: 1;
}
}
&:hover {
a {
opacity: 1;
}
}
ul, &.current-menu-item > ul, &:hover > ul {
position: relative;
padding: 10px 20px;
border-left: 1px solid rgba(0,0,0,.4);
li {
display: block;
margin: 0;
line-height: 30px;
white-space: nowrap;
a {
opacity: .5;
}
&.current-menu-item {
a {
opacity: 1;
}
}
&:hover {
a {
opacity: 1;
}
}
}
}
}
}
}
&::after {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 100%;
height: 5px;
background: @top_bar_bg;
background: var(--top_bar_bg);
}
}
}
}
.open-top-bar-search, .close-top-bar-search {
display: inline-block;
margin-left: 20px;
vertical-align: middle;
line-height: @header_height;
cursor: pointer;
opacity: .5;
transition: .1s;
&:hover {
opacity: 1;
transition: .1s;
}
svg {
display: inline-block;
height: 16px;
width: 16px;
line-height: @header_height;
stroke: @top_bar_color;
stroke: var(--top_bar_color);
stroke-width: 2px;
}
&.active {
opacity: 1;
svg {
stroke-width: 3px;
}
}
}
}
}
}
.mobile-navigation {
position: relative;
z-index: 9;
display: none;
width: 100%;
box-shadow: @shadow;
box-shadow: var(--shadow);
background: @top_bar_bg;
background: var(--top_bar_bg);
//background: var(--top_bar_bg);
text-align: center;
@media screen and (max-width: 860px) {
display: block;
}
.site-navigation {
display: inline-block;
padding: 30px 0;
margin: auto;
text-align: left;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
line-height: 200%;
a {
color: @top_bar_color;
color: var(--top_bar_color);
}
ul {
padding-left: 30px;
border-left: 1px dashed #e6e6e6;
}
}
}
}
.mobile-navigation-toggle {
position: absolute;
height: 40px;
width: 60px;
background: @top_bar_bg;
background: var(--top_bar_bg);
color: @top_bar_color;
color: var(--top_bar_color);
bottom: -40px;
left: 50%;
margin-left: -30px;
line-height: 40px;
box-shadow: @shadow;
box-shadow: var(--shadow);
text-align: center;
border-radius: 0 0 8px 8px;
cursor: pointer;
.open-icon, .close-icon {
margin-top: 5px;
svg {
stroke: @top_bar_color;
stroke: var(--top_bar_color);
}
}
.close-icon {
display: none;
}
&.active {
.close-icon {
display: block;
}
.open-icon {
display: none;
}
}
}
}