-$teal: #007880;
-
+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 {
display: flex;
align-items: center;
justify-content: space-between;
}
+
+ &.is-open {
+ position: fixed;
+ 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;
+ }
+
+ .c-lang {
+ opacity: 1;
+ .c-lang__button {
+ pointer-events: all;
+ }
+ }
+ }
+}
+
+.l-navigation__logo {
+ 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 {
padding: 0;
margin: 0;
outline: 0;
+ position: relative;
+}
+
+.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;
+ padding: 10px 20px;
border-radius: 52px;
width: 100%;
max-width: 580px;
outline: 0;
+
+ @include rwd($break-menu) {
+ font-size: 18px;
+ }
}
}
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 {
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;
}
line-height: 100%;
letter-spacing: -0.02em;
color: #333333;
- margin: 0;
+ margin: 20px 0;
min-width: 189px;
- margin-right: 48px;
}
p {
color: #333333;
margin: 0;
max-width: 590px;
+ }
+}
+
+.l-navigation__menu {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background-color: #083F4D;
+ z-index: $master-layer;
+ 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;
+ }
+ }
+ }
+ }
+}
+
+
+.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;
+ }
+}
- a {
- color: $teal;
+.l-navigation__menu__links {
+ display: contents;
+ width: 100%;
+ 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;
+ width: 45%;
+
+ @include rwd($break-menu) {
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: 20px;
+ }
+
+ li {
+ font-weight: $regular;
+ 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;
+ @include font-size(21px);
+ line-height: 140%;
+ letter-spacing: -0.01em;
+ }
+
+ a {
+ color: $color-white;
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ hr {
+ width: 34px;
+ height: 1px;
+ background: #007880;
+ margin-left: 0;
+ border: 0;
+ }
}
}
}
-.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__info {
+ display: flex;
+ justify-content: space-between;
+ 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;
+
+ p {
+ color: $color-white;
+ @include font-size(21px);
+ line-height: 140%;
+ strong {
+ color: #92BD39;
+ letter-spacing: -0.01em;
+ 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;
+ align-items: flex-start;
+ padding: 12px;
+ background-color: $color-white;
+ border-radius: 6px;
+ color: #808080;
+
+ flex-direction: column;
+ @include rwd($break-menu) {
+ flex-direction: row;
+ }
+
+ img {
+ margin-right: 10px;
+ width: 42px;
+ height: 60px;
+ }
+
+ h3 {
+ 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;
+ 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;
+ justify-content: space-between;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ li {
+ &:not(:last-child) {
+ margin-right: 36px;
+ }
+ a {
+ color: $color-white;
+ &:hover {
+ color: #92BD39;
+ }
+ }
+ .icon {
+ @include font-size(28px);
+ }
+ }
+ }
}
fnp / wolnelektury.git / blobdiff