X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/a98d18bc92d7d28d54c0cc1c1a636c9d79e6a648..7226da0450b08dd90714bd8e78cfe4920848415b:/src/wolnelektury/static/2022/styles/layout/_navigation.scss?ds=sidebyside diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss index 04e4dff1f..c4d4f7a9b 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -22,6 +22,7 @@ body { } .l-container { + position: relative; display: flex; align-items: center; justify-content: space-between; @@ -55,8 +56,23 @@ body { .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) { @@ -73,14 +89,24 @@ body { 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; @@ -190,19 +216,6 @@ body { } } -.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; @@ -250,6 +263,10 @@ body { font-size: 30px; } } + .c-lang { + display: block; + left: 16px; + } } } } @@ -353,6 +370,9 @@ body { display: flex; flex-direction: column; justify-content: space-between; + @include rwd($break-menu) { + width: 60%; + } p { color: $color-white; @@ -407,7 +427,7 @@ body { &.korona { &:before { - content: url('images/korona.svg'); + content: url('../images/korona.svg'); width: 21px; margin-right: -21px; position: relative; @@ -458,11 +478,14 @@ body { p { margin: 0; - width: 427px; font-weight: $regular; @include font-size(15px); line-height: 130%; color: #808080; + + @include rwd($break-menu) { + width: 427px; + } } }