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