yapi/client/components/Header/Header.scss

86 lines
1.4 KiB
SCSS
Raw Normal View History

2017-07-10 19:50:11 +08:00
@import '../../styles/common.scss';
2017-07-12 16:27:06 +08:00
$color-white : #fff;
2017-07-17 21:11:58 +08:00
$color-blue : #108ee9;
$color-blue-deeper: #34495E;
2017-07-12 16:27:06 +08:00
$color-grey-deep : #929aac;
2017-07-17 21:11:58 +08:00
$color-black-light : #404040;
2017-07-10 19:50:11 +08:00
/* .header-box.css */
.header-box {
display: block;
font-size: 0.14rem;
2017-07-12 16:27:06 +08:00
color: $color-white;
2017-07-18 18:25:53 +08:00
z-index: 99;
2017-07-10 19:50:11 +08:00
// 内容宽度
.content {
2017-07-18 18:25:53 +08:00
max-width: 11rem;
2017-07-10 19:50:11 +08:00
margin: 0 auto;
zoom: 1;
2017-07-12 16:27:06 +08:00
overflow: hidden;
2017-07-10 19:50:11 +08:00
}
2017-07-17 21:11:58 +08:00
.logo {
font-size: .3rem;
2017-07-10 19:50:11 +08:00
float: left;
margin: 0 .2rem 0 0;
2017-07-12 16:27:06 +08:00
color: $color-white;
2017-07-17 21:11:58 +08:00
//cursor: pointer;
a{
color: $color-white;
&:hover {
color: $color-white;
}
&:focus{
text-decoration: none;
}
}
2017-07-10 19:50:11 +08:00
}
2017-07-12 16:27:06 +08:00
.nav-toolbar {
2017-07-17 21:11:58 +08:00
font-size: .15rem;
2017-07-12 16:27:06 +08:00
float: left;
2017-07-10 19:50:11 +08:00
}
2017-07-12 16:27:06 +08:00
.user-toolbar{
2017-07-10 19:50:11 +08:00
float: right;
height: .64rem;
display: flex;
align-items: center;
.toolbar-li{
&:first-child{
width: 2rem;
}
2017-07-12 16:27:06 +08:00
float: left;
margin: 0 0 0 .12rem;
2017-07-17 21:11:58 +08:00
font-size: .14rem;
2017-07-12 16:27:06 +08:00
cursor: pointer;
2017-07-17 21:11:58 +08:00
color: $color-white;
2017-07-12 16:27:06 +08:00
&:not(:last-child){
margin: 0 .12rem;
2017-07-17 21:11:58 +08:00
}
&:hover{
color: $color-blue;
2017-07-18 18:25:53 +08:00
a{
color: $color-blue;
}
}
a{
color: $color-white;
&:hover{
color: $color-blue;
}
&:focus{
text-decoration: none;
}
2017-07-17 21:11:58 +08:00
}
i{
2017-07-19 10:38:29 +08:00
margin-right: .03rem;
2017-07-12 16:27:06 +08:00
}
.dropdown-link{
i{
font-size: .2rem;
}
}
2017-07-12 16:27:06 +08:00
}
2017-07-10 19:50:11 +08:00
}
2017-07-12 16:27:06 +08:00
}