nimbus-site/themes/navy/source/scss/header.scss

277 lines
4.1 KiB
SCSS

.header {
position: absolute;
display: flex;
justify-content: space-between;
width: 1200px;
height: 56px;
left: 50%;
top: 0;
margin: 24px 0 0 -600px;
}
.header-left {
display: flex;
align-items: center;
}
.header-right {
display: flex;
align-items: center;
}
.logo {
display: block;
width: 146px;
height: 56px;
background-image: url(../img/status-logo.svg);
background-size: 146px;
background-position: center;
background-repeat: no-repeat;
}
.mobile-nav-wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
box-sizing: border-box;
z-index: 400;
visibility: hidden;
pointer-events: none;
}
.mobile-nav-wrap.mobile-nav--shown {
visibility: visible;
pointer-events: all;
}
.mobile-nav-inner {
position: absolute;
width: 100%;
left: 0;
top: 0;
background-color: $colorWhite;
box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066);
z-index: 600;
opacity: 0;
transform: translate3d(0, -25px ,0) scaleY(.94);
visibility: hidden;
transition: visibility .5s linear 0s, opacity .1s linear, transform .4s cubic-bezier(0.175, 0.885, 0.135, 1.425);
}
.mobile-nav--shown .mobile-nav-inner {
visibility: visible;
opacity: 1;
transform: translate3d(0, -5px ,0) scaleY(1);
}
.mobile-nav-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(120, 135, 148, .25);
z-index: 500;
opacity: 0;
transition-delay: .2s;
transform: translate3d(0, 0 ,0) scale(1);
visibility: hidden;
transition: visibility .5s linear 0s, opacity .4s ease;
}
.mobile-nav--shown .mobile-nav-overlay {
transition-delay: 0s;
visibility: visible;
opacity: 1;
transform: translate3d(0, 0 ,0) scale(1);
}
.mobile-nav-wrap .logo {
margin: 24px;
}
.mobile-nav-wrap .icon-close {
position: absolute;
right: 24px;
top: 40px;
width: 16px;
height: 16px;
background-image: url(../img/icon-close.svg);
background-size: 16px;
}
.mobile-nav {
padding: 0 24px 16px 24px;
}
.mobile-nav li a,
.mobile-nav li span {
color: $colorBlack;
display: block;
padding: 16px 0;
}
.mobile-sub-nav li a {
color: $colorGray;
padding-left: 32px;
}
.mobile-nav-footer {
display: flex;
align-items: center;
justify-content: center;
padding: 24px 0;
margin: 0 24px;
border-top: 1px solid rgba(232, 235, 236, 1)
}
.mobile-nav-footer .button {
display: block;
max-width: 240px;
}
.main-nav {
display: flex;
align-items: center;
margin-left: 32px;
}
.main-nav li {
margin: 16px 12px 12px 12px;
}
.main-nav li.item--dropdown{
margin-right: 28px;
}
.main-nav li.item--more {
display: none;
}
.main-nav li.item--more a{
color: $colorGray
}
.main-nav li a {
display: block;
position: relative;
}
.main-nav li.item--dropdown a::after{
content: "";
position: absolute;
width: 16px;
height: 16px;
display: block;
background-size: 16px;
background-repeat: no-repeat;
background-position: top right;
padding: 0 8px 0 8px;
top: 0px;
right: -24px;
background-image: url(../img/icon-arrow-down.svg);
transition: transform .2s ease;
opacity: 1;
color: #fff !important;
}
.main-nav li:first-child {
margin-left: 0;
}
.main-nav li:last-child {
margin-right: 0;
}
.main-nav a:hover {
opacity: .8;
}
.main-nav a:visited {
//TODO
}
.main-nav a {
color: $colorWhite;
text-decoration: none;
}
@media (max-width: 1248px) {
.header {
width: 100%;
left: 0;
top: 0;
margin: 24px 0 0 0;
padding: 0 24px;
}
}
@media (max-width: 1080px) {
.header {
width: 100%;
left: 0;
top: 0;
margin: 24px 0 0 0;
padding: 0 24px;
}
.header-right {
display: none;
}
}
@media (max-width: 960px) {
.logo {
width: 121px;
height: 46px;
background-size: 121px;
}
.main-nav li {
display: none;
}
.main-nav li.item--to-show {
display: block;
}
.main-nav li.item--more {
display: block;
}
.main-nav li {
margin: 16px 8px 12px 8px;
}
.main-nav li.item--dropdown{
margin-right: 28px;
}
}
@media (max-width: 640px) {
.header {
height: auto;
}
.header-left {
align-items: flex-start;
flex-direction: column;
}
.main-nav {
margin-left: 0;
}
.main-nav li {
margin-top: 24px
}
}