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

271 lines
4.8 KiB
Stylus
Raw Normal View History

2020-04-01 12:09:06 +08:00
@require "../common/variables.styl"
.header-wrapper {
width: 100%;
height: 100%;
box-sizing: border-box;
background: var(--background-color);
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 {
2020-04-01 22:42:24 +08:00
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: $main-content-width;
height: 100%;
position: relative;
transition: transform 0.5s ease;
2020-04-01 22:42:24 +08:00
z-index: $z-index-5;
.logo-title {
font-size: 28px;
font-weight: bold;
2020-04-01 22:42:24 +08:00
letter-spacing: 1px;
color: var(--first-text-color);
2020-04-01 22:42:24 +08:00
transform-origin: left center;
transition: all 0.5s ease;
}
.menu-list {
.menu-item {
float: left;
position: relative;
margin-left: 30px;
&:first-child {
margin-left: 0;
}
2020-04-01 22:42:24 +08:00
a {
&:hover {
color: var(--normal-text-color);;
2020-04-01 22:42:24 +08:00
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 100%;
height: 2px;
transform: translateX(-50%);
2020-04-01 22:42:24 +08:00
background: $primary-color;
transition: all 0.5s ease;
}
}
}
.active {
color: var(--second-text-color);;
2020-04-01 22:42:24 +08:00
font-weight: bold;
transition: all 0.5s ease;
&::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 100%;
height: 2px;
transform: translateX(-50%);
2020-04-01 22:42:24 +08:00
background: $primary-color;
transition: all 0.5s ease;
}
}
}
}
.menu-bar {
display: none;
2020-04-01 22:42:24 +08:00
position: relative;
cursor: pointer;
2020-04-01 22:42:24 +08:00
.menu-bar-middle {
width: 18px;
height: 2px;
margin: 6px 0;
position: relative;
background: var(--normal-text-color);;
2020-04-01 22:42:24 +08:00
transition: all 0.3s ease;
&::before {
content: '';
position: absolute;
top: -6px;
left: 0;
width: 100%;
height: 2px;
background: var(--normal-text-color);;
2020-04-01 22:42:24 +08:00
transition: all 0.3s ease;
}
&::after {
content: '';
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
height: 2px;
background: var(--normal-text-color);;
2020-04-01 22:42:24 +08:00
transition: all 0.3s ease;
}
}
}
}
.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: var(--background-color);;
transition: all 0.5s ease;
2020-04-01 22:42:24 +08:00
z-index: $z-index-2;
.drawer-menu-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
list-style-type: none;
.drawer-menu-item {
2020-04-01 22:42:24 +08:00
a {
display: block;
margin: 8px auto;
padding: 0 20px;
border-radius: 20px;
text-align: center;
line-height: 34px;
color: var(--normal-text-color);;
2020-04-01 22:42:24 +08:00
transition: all 0.5s ease;
&:hover {
color: var(--second-text-color);;
2020-04-01 22:42:24 +08:00
font-weight: bold;
}
}
.active {
border: 1px solid $primary-color;
color: var(--second-text-color);;
2020-04-01 22:42:24 +08:00
font-weight: bold;
}
}
2020-04-01 22:42:24 +08:00
}
}
.window-mask {
position: absolute;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
2020-04-01 22:42:24 +08:00
z-index: $z-index-1;
visibility: hidden;
opacity: 0;
2020-04-01 22:42:24 +08:00
transition: all 0.3s ease;
}
}
.header-drawer-show {
2020-04-01 22:42:24 +08:00
.header-content {
.menu-bar {
.menu-bar-middle {
2020-04-01 22:42:24 +08:00
background: transparent;
&::before {
transform: translateY(6px) rotate(45deg);
}
2020-04-01 22:42:24 +08:00
&::after {
transform: translateY(-6px) rotate(-45deg);
}
}
}
}
.header-drawer {
transform: scaleY(1);
}
.window-mask {
visibility: visible;
opacity: 1;
}
}
.header-wrapper-shrink {
background: var(--background-color);;
2020-04-01 22:42:24 +08:00
box-shadow: 0 1px 2px $border-color;
.header-content {
2020-04-01 22:42:24 +08:00
.logo-title {
transform: scale(0.86);
}
.menu-list {
.menu-item {
a:hover {
&::after {
2020-04-01 22:42:24 +08:00
bottom: -20px;
}
}
.active::after {
2020-04-01 22:42:24 +08:00
bottom: -20px;
}
}
}
}
.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;
}
}