src/wolnelektury/static/2022/styles/layout/_navigation.scss

   1 body {
   2     //width: 100%;
   3 }
   4
   5 .l-navigation {
   6   max-width: 100%;
   7   margin: 0 auto;
   8   background-color: #083F4D;
   9
  10   padding: 3px 0;
  11   display: flex;
  12   align-items: center;
  13   justify-content: space-between;
  14   flex-direction: column;
  15
  16   @include rwd($break-menu) {
  17       padding: 12px 0;
  18   }
  19
  20   a:hover {
  21       text-decoration: none;
  22   }
  23
  24   .l-container {
  25     display: flex;
  26     align-items: center;
  27     justify-content: space-between;
  28   }
  29
  30   &.is-open {
  31     position: fixed;
  32     top: 0; left: 0;
  33     width: 100%;
  34     z-index: $master-layer;
  35
  36     .l-navigation__logo {
  37         width: unset;
  38         overflow: unset;
  39     }
  40
  41     .l-navigation__menu {
  42       opacity: 1;
  43       pointer-events: all;
  44     }
  45
  46     .c-lang {
  47       opacity: 1;
  48       .c-lang__button {
  49         pointer-events: all;
  50       }
  51     }
  52   }
  53 }
  54
  55 .l-navigation__logo {
  56     display: flex;
  57     position: relative;
  58
  59     img {
  60         width: 153px;
  61         @include rwd($break-menu) {
  62             width: 230px;
  63         }
  64     }
  65 }
  66
  67 .l-navigation__button {
  68   appearance: none;
  69   border: 0;
  70   background: 0;
  71   padding: 0;
  72   margin: 0;
  73   outline: 0;
  74   position: relative;
  75 }
  76
  77 .is-open {
  78     .l-navigation__logo {
  79         z-index: $master-layer + 1;
  80     }
  81     .l-navigation__button {
  82         z-index: $master-layer + 1;
  83     }
  84 }
  85
  86
  87 .l-naviagion__search {
  88     width: 60%;
  89     max-width: 580px;
  90     margin-left: 20px;
  91     margin-right: 20px;
  92
  93     @include rwd($break-menu) {
  94         margin-left: 60px;
  95         margin-right: auto;
  96     }
  97
  98   input {
  99     font-family: $base-font;
 100
 101     font-size: 14px;
 102     font-style: italic;
 103     border: 0;
 104     padding: 10px 20px;
 105     border-radius: 52px;
 106     width: 100%;
 107     max-width: 580px;
 108     outline: 0;
 109
 110     @include rwd($break-menu) {
 111         font-size: 18px;
 112     }
 113   }
 114 }
 115
 116 .l-navigation__actions {
 117   display: flex;
 118   align-items: center;
 119   justify-content: center;
 120     position: relative;
 121     height: 44px;
 122
 123   .icon-liked {
 124     color: #85C7CC;
 125     font-size: 30px;
 126     margin-right: 25px;
 127   }
 128
 129   .l-navigation__user-actions {
 130       display: none;
 131       align-items: center;
 132
 133       @include rwd($break-menu) {
 134           display: flex;
 135           margin-left: 20px;
 136       }
 137       .l-navigation__login {
 138           color: #74BDC2;
 139           margin-right: 20px;
 140           white-space: nowrap;
 141
 142           a {
 143               color: white;
 144           }
 145       }
 146   }
 147
 148     .user {
 149         margin-right: 25px;
 150     }
 151
 152 }
 153
 154 .l-change-pop {
 155   align-items: center;
 156   max-width: 1140px;
 157   border-radius: 10px;
 158   padding: 10px 50px;
 159   width: auto;
 160
 161   margin-top: 18px;
 162   margin-bottom: 18px;
 163   background-color: #FBC40F;
 164   position: relative;
 165   display: none;
 166
 167   margin-left: 16px;
 168   margin-right: 16px;
 169   flex-direction: column;
 170   column-gap: 48px;
 171
 172   @include rwd($break-flow) {
 173       flex-direction: row;
 174   }
 175
 176   &.show {
 177     display: flex;
 178   }
 179
 180   h3 {
 181     font-style: italic;
 182     font-weight: normal;
 183     font-size: 32px;
 184     line-height: 100%;
 185     letter-spacing: -0.02em;
 186     color: #333333;
 187     margin: 20px 0;
 188     min-width: 189px;
 189   }
 190
 191   p {
 192     font-weight: normal;
 193     font-size: 15px;
 194     line-height: 150%;
 195     color: #333333;
 196     margin: 0;
 197     max-width: 590px;
 198   }
 199 }
 200
 201 .l-change-pop__close {
 202   border: 0;
 203   background: transparent;
 204   color: #333333;
 205   outline: 0;
 206   position: absolute;
 207   right: 26px;
 208   top: 0;
 209   bottom: 0;
 210   margin: auto;
 211   cursor: pointer;
 212 }
 213
 214 .l-navigation__menu {
 215   position: fixed;
 216   top: 0; left: 0;
 217   width: 100%; height: 100%;
 218   background-color: #083F4D;
 219   z-index: $master-layer;
 220   padding-top: 50px;
 221   opacity: 0;
 222   pointer-events: none;
 223   transition: opacity 350ms $ease-out;
 224
 225   @include rwd($break-menu) {
 226       padding-top: 93px;
 227   }
 228
 229   .l-container {
 230     display: flex;
 231     flex-direction: column;
 232   }
 233
 234   .l-navigation__user-bar {
 235       width: 100%;
 236       height: 50px;
 237       border-width: 1px 0;
 238       border-color: #007880;
 239       border-style: solid;
 240       display: flex;
 241       flex-direction: row;
 242       justify-content: end;
 243       align-items: center;
 244
 245       @include rwd($break-menu) {
 246           display: none;
 247       }
 248
 249       .l-navigation__user-actions {
 250           display: flex;
 251           align-items: center;
 252           gap: 25px;
 253           color: #85C7CC;
 254           a {
 255               color: white;
 256               i {
 257                   color: #85C7CC;
 258                   font-size: 30px;
 259               }
 260           }
 261       }
 262   }
 263 }
 264
 265
 266 .l-navigation__menu__blocks {
 267     position: relative;
 268     display: flex;
 269     width: 100%;
 270     justify-content: space-between;
 271     column-gap: 10%;
 272     row-gap: 30px;
 273     flex-wrap: wrap;
 274     padding-bottom: 80px;
 275
 276     @include rwd($break-menu) {
 277         display: block;
 278         padding-bottom: 0;
 279     }
 280 }
 281
 282 .l-navigation__menu__links {
 283     display: contents;
 284   width: 100%;
 285   justify-content: space-between;
 286   column-gap: 10%;
 287   row-gap: 30px;
 288   flex-wrap: wrap;
 289
 290   @include rwd($break-menu) {
 291       display: flex;
 292       flex-wrap: nowrap;
 293       gap: 3%;
 294   }
 295
 296   ul {
 297     margin: 0;
 298     padding: 0;
 299     list-style: none;
 300     //max-width: 212px;
 301     width: 45%;
 302
 303     @include rwd($break-menu) {
 304       width: 100%;
 305       max-width: 100%;
 306       margin-bottom: 20px;
 307     }
 308
 309     li {
 310       font-weight: $regular;
 311       font-size: 16px;
 312       line-height: 150%;
 313       padding-top: 16px;
 314
 315       @include rwd($break-menu) {
 316           font-size: 18px;
 317           line-height: 115%;
 318       }
 319
 320       strong {
 321         color: #92BD39;
 322         font-weight: $semibold;
 323         @include font-size(21px);
 324         line-height: 140%;
 325         letter-spacing: -0.01em;
 326       }
 327
 328       a {
 329         color: $color-white;
 330         &:hover {
 331           text-decoration: underline;
 332         }
 333       }
 334
 335       hr {
 336         width: 34px;
 337         height: 1px;
 338         background: #007880;
 339         margin-left: 0;
 340         border: 0;
 341       }
 342     }
 343   }
 344 }
 345
 346 .l-navigation__menu__info {
 347   display: flex;
 348   justify-content: space-between;
 349   width: 45%;
 350   padding-top: 16px;
 351
 352   @include rwd($break-menu) {
 353       width: 100%;
 354       padding-top: 58px;
 355       align-items: flex-end;
 356   }
 357
 358 }
 359
 360 .l-navigation__menu__book {
 361     display: flex;
 362     flex-direction: column;
 363     justify-content: space-between;
 364
 365   p {
 366     color: $color-white;
 367     @include font-size(21px);
 368     line-height: 140%;
 369     strong {
 370       color: #92BD39;
 371       letter-spacing: -0.01em;
 372       font-weight: $semibold;
 373     }
 374   }
 375
 376   .button {
 377         display: inline-block;
 378         font-size: 16px;
 379         font-weight: 700;
 380         padding: 0 20px;
 381         line-height: 38px;
 382         text-align: center;
 383
 384         /* green 700 */
 385         background: #92BD39;
 386         color: #083F4D;
 387         border-radius: 6px;
 388
 389         transition: background-color 150ms;
 390
 391         @include rwd($break-menu) {
 392             width: auto;
 393             min-width: 212px;
 394         }
 395
 396         &:hover {
 397             background-color: #FBC40F;
 398         }
 399     }
 400 }
 401
 402 .l-navigation__menu__book__header {
 403     display: flex;
 404     justify-content: space-between;
 405     flex-direction: column;
 406     row-gap: 18px;
 407
 408     @include rwd($break-menu) {
 409         flex-direction: row;
 410         align-items: center;
 411     }
 412
 413     p {
 414         margin: 0;
 415
 416         &.korona {
 417             &:before {
 418                 content: url('../images/korona.svg');
 419                 width: 21px;
 420                 margin-right: -21px;
 421                 position: relative;
 422                 top: -10px;
 423                 left: -3px;
 424             }
 425         }
 426     }
 427 }
 428
 429
 430 .l-navigation__menu__book__info {
 431   display: flex;
 432   margin-top: 20px;
 433   align-items: flex-start;
 434   padding: 12px;
 435   background-color: $color-white;
 436   border-radius: 6px;
 437   color: #808080;
 438
 439   flex-direction: column;
 440   @include rwd($break-menu) {
 441       flex-direction: row;
 442   }
 443
 444   img {
 445     margin-right: 10px;
 446         width: 42px;
 447         height: 60px;
 448   }
 449
 450   h3 {
 451       display: flex;
 452       margin: 0;
 453       font-weight: $regular;
 454       @include font-size(15px);
 455       line-height: 120%;
 456       @include rwd($break-menu) {
 457         width: 203px;
 458       }
 459       strong {
 460           display: block;
 461           font-weight: $semibold;
 462           @include font-size(18px);
 463           line-height: 130%;
 464       }
 465   }
 466
 467   p {
 468     margin: 0;
 469     width: 427px;
 470     font-weight: $regular;
 471     @include font-size(15px);
 472     line-height: 130%;
 473     color: #808080;
 474   }
 475 }
 476
 477 .l-navigation__menu__social {
 478     position: absolute;
 479     left: 0;
 480     right: 0;
 481     bottom: 0;
 482
 483     @include rwd($break-menu) {
 484         position: static;
 485     }
 486
 487
 488   ul {
 489       display: flex;
 490       justify-content: space-between;
 491     list-style: none;
 492     padding: 0;
 493     margin: 0;
 494     li {
 495       &:not(:last-child) {
 496         margin-right: 36px;
 497       }
 498       a {
 499         color: $color-white;
 500         &:hover {
 501           color: #92BD39;
 502         }
 503       }
 504       .icon {
 505         @include font-size(28px);
 506       }
 507     }
 508   }
 509 }