hexo-theme-keep/source/css/layout/_partial/header.styl

244 lines
3.9 KiB
Stylus
Raw Normal View History

2020-04-01 12:09:06 +08:00
@require "../common/variables.styl"
@import "../common/root.styl"
2020-04-01 12:09:06 +08:00
.header-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: height 0.5s ease, max-width 0.5s cubic-bezier(0, 0.2, 0.8, 1);
.header-content {
width: 80%;
height: 100%;
position: relative;
transition: transform 0.5s ease;
z-index: 999;
.vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.logo-title {
left: 0;
font-size: 28px;
font-weight: bold;
color: #555;
&::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 40px;
height: 2px;
background: $a-hover-color;
transition: all 0.5s ease;
}
}
.menu-list {
right: 0;
.menu-item {
float: left;
position: relative;
margin-left: 30px;
&:first-child {
margin-left: 0;
}
a {
&:hover {
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 100%;
height: 2px;
transform: translateX(-50%);
background: $a-hover-color;
transition: all 0.5s ease;
}
}
}
.active {
color: #555;
font-weight: 700;
transition: all 0.5s ease;
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 100%;
height: 2px;
transform: translateX(-50%);
background: $a-hover-color;
transition: all 0.5s ease;
}
}
}
}
.menu-bar {
right: 0;
font-size: 20px;
display: none;
cursor: pointer;
}
}
.header-drawer {
width: 100%;
2020-04-01 12:09:06 +08:00
padding: $header-height 0 20px 0;
position: absolute;
top: 0;
left: 0;
transform: scaleY(0);
transform-origin: top;
background: white;
transition: all 0.5s ease;
z-index: 998;
.drawer-menu-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
list-style-type: none;
.drawer-menu-item {
display: block;
margin: 8px auto;
padding: 0 30px;
border-radius: 22px;
text-align: center;
line-height: 42px;
font-size: 14px;
color: #9ca3ad;
transition: all 0.5s ease;
}
.drawer-menu-active {
background: $a-hover-color;
color: white;
}
}
}
.window-mask {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
visibility: hidden;
opacity: 0;
transition: all 0.2s ease;
}
}
.header-drawer-show {
.menu-bar {
background: rgba(0, 0, 0, 0);
&::before {
background: #2c3e50;
transform: translateY(6px) rotate(45deg);
}
&::after {
background: #2c3e50;
transform: translateY(-6px) rotate(-45deg);
}
}
.header-drawer {
transform: scaleY(1);
}
.window-mask {
visibility: visible;
opacity: 1;
}
}
.header-wrapper-shrink {
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
.header-content {
.logo-title {
&::after {
opacity: 0;
}
}
.menu-list {
.menu-item {
a:hover {
&::after {
bottom: -22px;
}
}
.active::after {
bottom: -22px;
}
}
}
}
.header-drawer {
2020-04-01 12:09:06 +08:00
padding: $header-shrink-height 0 20px 0;
}
}
@media screen and (max-width: 760px) {
.menu-list {
display: none;
}
.menu-bar {
display: block !important;
}
}