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

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