X-Git-Url: https://git.mdrn.pl/wolnelektury.git/blobdiff_plain/592c9401b18118e01de250d44878b9289b138f9c..6407cf24cd6cf3f9ea6fdf4a8924dad109a590e6:/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 a61b7ae6a..c4d4f7a9b 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -1,14 +1,28 @@ +body { + //width: 100%; +} + .l-navigation { max-width: 100%; margin: 0 auto; background-color: #083F4D; - padding: 12px 0; + + padding: 3px 0; display: flex; align-items: center; justify-content: space-between; flex-direction: column; + @include rwd($break-menu) { + padding: 12px 0; + } + + a:hover { + text-decoration: none; + } + .l-container { + position: relative; display: flex; align-items: center; justify-content: space-between; @@ -19,6 +33,12 @@ top: 0; left: 0; width: 100%; z-index: $master-layer; + + .l-navigation__logo { + width: unset; + overflow: unset; + } + .l-navigation__menu { opacity: 1; pointer-events: all; @@ -34,8 +54,31 @@ } .l-navigation__logo { - position: relative; - z-index: $master-layer + 1; + display: flex; + position: relative; + 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) { + width: 230px; + } + } } .l-navigation__button { @@ -46,18 +89,34 @@ 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: 60px; - margin-right: auto; + width: 60%; + max-width: 580px; + margin-left: 20px; + margin-right: 20px; + flex-grow: 1; + + @include rwd($break-menu) { + margin-left: 60px; + margin-right: auto; + } input { font-family: $base-font; - font-size: 18px; + + font-size: 14px; font-style: italic; border: 0; padding: 10px 20px; @@ -65,6 +124,10 @@ width: 100%; max-width: 580px; outline: 0; + + @include rwd($break-menu) { + font-size: 18px; + } } } @@ -72,12 +135,38 @@ display: flex; align-items: center; justify-content: center; + position: relative; + height: 44px; .icon-liked { color: #85C7CC; font-size: 30px; margin-right: 25px; } + + .l-navigation__user-actions { + display: none; + align-items: center; + + @include rwd($break-menu) { + display: flex; + margin-left: 20px; + } + .l-navigation__login { + color: #74BDC2; + margin-right: 20px; + white-space: nowrap; + + a { + color: white; + } + } + } + + .user { + margin-right: 25px; + } + } .l-change-pop { @@ -85,12 +174,23 @@ max-width: 1140px; border-radius: 10px; padding: 10px 50px; - width: 100%; - margin-bottom: 10px; + width: auto; + + margin-top: 18px; + margin-bottom: 18px; background-color: #FBC40F; position: relative; display: none; + margin-left: 16px; + margin-right: 16px; + flex-direction: column; + column-gap: 48px; + + @include rwd($break-flow) { + flex-direction: row; + } + &.show { display: flex; } @@ -102,9 +202,8 @@ line-height: 100%; letter-spacing: -0.02em; color: #333333; - margin: 0; + margin: 20px 0; min-width: 189px; - margin-right: 48px; } p { @@ -117,53 +216,116 @@ } } -.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; width: 100%; height: 100%; background-color: #083F4D; z-index: $master-layer; - padding-top: 93px; + padding-top: 50px; opacity: 0; pointer-events: none; transition: opacity 350ms $ease-out; + @include rwd($break-menu) { + padding-top: 93px; + } + .l-container { display: flex; flex-direction: column; } + + .l-navigation__user-bar { + width: 100%; + height: 50px; + border-width: 1px 0; + border-color: #007880; + border-style: solid; + display: flex; + flex-direction: row; + justify-content: end; + align-items: center; + + @include rwd($break-menu) { + display: none; + } + + .l-navigation__user-actions { + display: flex; + align-items: center; + gap: 25px; + color: #85C7CC; + a { + color: white; + i { + color: #85C7CC; + font-size: 30px; + } + } + .c-lang { + display: block; + left: 16px; + } + } + } +} + + +.l-navigation__menu__blocks { + position: relative; + display: flex; + width: 100%; + justify-content: space-between; + column-gap: 10%; + row-gap: 30px; + flex-wrap: wrap; + padding-bottom: 80px; + + @include rwd($break-menu) { + display: block; + padding-bottom: 0; + } } .l-navigation__menu__links { + display: contents; width: 100%; - display: flex; justify-content: space-between; + column-gap: 10%; + row-gap: 30px; + flex-wrap: wrap; + + @include rwd($break-menu) { + display: flex; + flex-wrap: nowrap; + gap: 3%; + } ul { margin: 0; padding: 0; list-style: none; - max-width: 212px; + //max-width: 212px; + width: 45%; + + @include rwd($break-menu) { + width: 100%; + max-width: 100%; + margin-bottom: 20px; + } li { font-weight: $regular; - @include font-size(18px); - line-height: 100%; + font-size: 16px; + line-height: 150%; padding-top: 16px; + @include rwd($break-menu) { + font-size: 18px; + line-height: 115%; + } + strong { color: #92BD39; font-weight: $semibold; @@ -192,13 +354,26 @@ .l-navigation__menu__info { display: flex; - width: 100%; - padding-top: 58px; justify-content: space-between; - align-items: flex-end; + width: 45%; + padding-top: 16px; + + @include rwd($break-menu) { + width: 100%; + padding-top: 58px; + align-items: flex-end; + } + } .l-navigation__menu__book { + display: flex; + flex-direction: column; + justify-content: space-between; + @include rwd($break-menu) { + width: 60%; + } + p { color: $color-white; @include font-size(21px); @@ -209,8 +384,61 @@ font-weight: $semibold; } } + + .button { + display: inline-block; + font-size: 16px; + font-weight: 700; + padding: 0 20px; + line-height: 38px; + text-align: center; + + /* green 700 */ + background: #92BD39; + color: #083F4D; + border-radius: 6px; + + transition: background-color 150ms; + + @include rwd($break-menu) { + width: auto; + min-width: 212px; + } + + &:hover { + background-color: #FBC40F; + } + } } +.l-navigation__menu__book__header { + display: flex; + justify-content: space-between; + flex-direction: column; + row-gap: 18px; + + @include rwd($break-menu) { + flex-direction: row; + align-items: center; + } + + p { + margin: 0; + + &.korona { + &:before { + content: url('../images/korona.svg'); + width: 21px; + margin-right: -21px; + position: relative; + top: -10px; + left: -3px; + } + } + } +} + + .l-navigation__menu__book__info { display: flex; margin-top: 20px; @@ -220,37 +448,61 @@ border-radius: 6px; color: #808080; + flex-direction: column; + @include rwd($break-menu) { + flex-direction: row; + } + img { margin-right: 10px; + width: 42px; + height: 60px; } h3 { - margin: 0; - font-weight: $regular; - @include font-size(15px); - line-height: 120%; - width: 150px; - strong { - display: block; - font-weight: $semibold; - @include font-size(18px); - line-height: 130%; - } + display: flex; + margin: 0; + font-weight: $regular; + @include font-size(15px); + line-height: 120%; + @include rwd($break-menu) { + width: 203px; + } + strong { + display: block; + font-weight: $semibold; + @include font-size(18px); + line-height: 130%; + } } p { margin: 0; - width: 427px; font-weight: $regular; @include font-size(15px); line-height: 130%; color: #808080; + + @include rwd($break-menu) { + width: 427px; + } } } .l-navigation__menu__social { + position: absolute; + left: 0; + right: 0; + bottom: 0; + + @include rwd($break-menu) { + position: static; + } + + ul { - display: flex; + display: flex; + justify-content: space-between; list-style: none; padding: 0; margin: 0; @@ -269,4 +521,4 @@ } } } -} \ No newline at end of file +}