You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
213 lines
3.9 KiB
213 lines
3.9 KiB
.l_header { |
|
position:fixed; |
|
z-index: 9999; |
|
top:0; |
|
left:0; |
|
width:100%; |
|
font-size: @header-font-size; |
|
line-height: @header-height; |
|
// letter-spacing: .08em; |
|
height: @header-height; |
|
overflow: hidden; |
|
font-family: @title-font-family; |
|
.wrapper{ |
|
.enable-trans(); |
|
} |
|
.wrapper.sub{ |
|
transform: translateY(-@header-height); |
|
} |
|
.nav--main,.nav-sub{ |
|
height: @header-height; |
|
} |
|
background: @primary-color; |
|
// padding: 0 @gap; |
|
&, a{ |
|
.txt-ellipsis; |
|
color: @text-color-inside-theme; |
|
} |
|
&:extend(.z-depth-nav); |
|
.enable-trans(); |
|
&:hover { |
|
&:extend(.z-depth-nav-raised); |
|
} |
|
&:active { |
|
|
|
} |
|
.logo { |
|
// flex: none; |
|
padding: 0 @gap; |
|
// padding: 0; |
|
font-size: @header-logo-font-size; |
|
@media(max-width: @on-phone){ |
|
flex: auto; |
|
font-size: @header-logo-font-size * .95; |
|
} |
|
} |
|
.menu{ |
|
position:relative; |
|
flex: 1 0 auto; |
|
height: @header-height; |
|
.enable-trans(); |
|
margin:0 28px; |
|
ul > li > a{ |
|
.enable-trans(); |
|
display: block; |
|
font-size: @header-font-size * .95; |
|
color: fade(@text-color-inside-theme,60%); |
|
padding: 0 @gap / 2; |
|
&:hover,&.active{ |
|
color: @text-color-inside-theme; |
|
} |
|
} |
|
@media(max-width: @on-laptop){ |
|
font-size: @header-font-size * .95; |
|
} |
|
@media(max-width: @on-phone){ |
|
display:none; |
|
} |
|
|
|
.underline{ |
|
.enable-trans(); |
|
position: absolute; |
|
background: @text-color-inside-theme; |
|
left: 0; |
|
bottom: 0; |
|
width: 0; |
|
height: 2px; |
|
} |
|
} |
|
.switcher{ |
|
padding: 0 @gap; |
|
display: none; |
|
font-size: @header-switcher-font-size; |
|
& > li{ |
|
margin-left: @gap; |
|
.enable-trans(); |
|
svg{ |
|
margin-top:16px; |
|
} |
|
} |
|
// & > li.s-menu.active { |
|
// transform: rotate(90deg); |
|
// } |
|
@media(max-width: @on-phone){ |
|
display: flex; |
|
} |
|
} |
|
.nav-sub .switcher{ |
|
display: flex; |
|
} |
|
|
|
@media (max-width: @on-phone) { |
|
font-size: @header-font-size * .9; |
|
.m_search{ |
|
width:0; |
|
overflow: hidden; |
|
position: absolute; |
|
.enable-trans(); |
|
right: 10px; |
|
top:(@header-height - @search-height)/2; |
|
} |
|
&.z_search-open{ |
|
.logo,.switcher{ |
|
opacity:0; |
|
} |
|
.m_search{ |
|
width: 50%; |
|
} |
|
} |
|
} |
|
} |
|
.m_search { |
|
position: relative; |
|
height: @search-height; |
|
width: @search-width; |
|
line-height: @search-height; |
|
vertical-align: middle; |
|
.form { |
|
position: relative; |
|
display: block; |
|
width: 100%; |
|
} |
|
.icon,.input{ |
|
.enable-trans(.1s); |
|
} |
|
.icon { |
|
position: absolute; |
|
display:block; |
|
height: @search-height; |
|
width: @search-height; |
|
line-height: @search-height; |
|
top: 0; |
|
left: @gap/2; |
|
} |
|
.input { |
|
display:block; |
|
font-size: 14px; |
|
line-height: @search-height - 10px; |
|
margin: 0; |
|
width: 100%; |
|
color: @text-color-inside-theme; |
|
padding: 5px 10px 5px 40px; |
|
height: @search-height; |
|
line-height: @search-height; |
|
font-family: @base-font-family; |
|
border: none; |
|
border-radius: 3px; |
|
background:fade(@text-color-inside-theme,15%); |
|
box-sizing: border-box; |
|
-webkit-appearance: none; |
|
box-shadow: none; |
|
&:hover{ |
|
background: fade(white,35%); |
|
} |
|
&:focus { |
|
color:@black; |
|
background: white; |
|
.set-placeholder({color: @black}); |
|
} |
|
&:focus ~ .icon{ |
|
color: @black; |
|
} |
|
.set-placeholder({color: @text-color-inside-theme}); |
|
} |
|
|
|
} |
|
|
|
.menu-phone{ |
|
position: fixed; |
|
top: @header-height + @gap; |
|
right: 0; |
|
width: 180px; |
|
z-index:9999 + 1; |
|
padding: @gap/2 0px; |
|
line-height: 2 * @gap; |
|
background: white; |
|
// border: 1px solid #e6e7e6; |
|
border-right: 0; |
|
&:extend(.z-depth-main); |
|
border-radius: @border-radius-width; |
|
transform: translate3d(180px, -0, 0); |
|
.enable-trans(); |
|
&:hover { |
|
&:extend(.z-depth-main-raised); |
|
} |
|
&:active { |
|
// box-shadow: 0 1.5px 3px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); |
|
} |
|
nav { |
|
.nav { |
|
position: relative; |
|
display: block; |
|
color: @black; |
|
font-size: 0.8125em; |
|
padding: 2px 20px; |
|
border-left: 0px solid @primary-color; |
|
&:hover { |
|
background: darken(white, 4%); |
|
border-left: 3px solid @primary-color; |
|
} |
|
} |
|
} |
|
}
|
|
|