.l-navigation__logo {
display: flex;
position: relative;
- z-index: $master-layer + 1;
+ height: 44px;
+ width: 153px;
+ flex-shrink: 0;
+ overflow: hidden;
+ transition: .5s width;
+
+ @include rwd($break-menu) {
+ width: 230px;
+ }
+ &.search-active {
+ width: 30px;
+ @include rwd($break-menu) {
+ width: 230px;
+ }
+ }
+
img {
width: 153px;
@include rwd($break-menu) {
margin: 0;
outline: 0;
position: relative;
- z-index: $master-layer + 1;
}
+.is-open {
+ .l-navigation__logo {
+ z-index: $master-layer + 1;
+ }
+ .l-navigation__button {
+ z-index: $master-layer + 1;
+ }
+}
+
+
.l-naviagion__search {
width: 60%;
max-width: 580px;
margin-left: 20px;
margin-right: 20px;
+ flex-grow: 1;
@include rwd($break-menu) {
margin-left: 60px;
}
}
-.l-change-pop__close {
- border: 0;
- background: transparent;
- color: #333333;
- outline: 0;
- position: absolute;
- right: 26px;
- top: 0;
- bottom: 0;
- margin: auto;
- cursor: pointer;
-}
-
.l-navigation__menu {
position: fixed;
top: 0; left: 0;
&.korona {
&:before {
- content: url('images/korona.svg');
+ content: url('../images/korona.svg');
width: 21px;
margin-right: -21px;
position: relative;
p {
margin: 0;
- width: 427px;
font-weight: $regular;
@include font-size(15px);
line-height: 130%;
color: #808080;
+
+ @include rwd($break-menu) {
+ width: 427px;
+ }
}
}