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