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-change-pop__close {
 219   border: 0;
 220   background: transparent;
 221   color: #333333;
 222   outline: 0;
 223   position: absolute;
 224   right: 26px;
 225   top: 0;
 226   bottom: 0;
 227   margin: auto;
 228   cursor: pointer;
 229 }
 230
 231 .l-navigation__menu {
 232   position: fixed;
 233   top: 0; left: 0;
 234   width: 100%; height: 100%;
 235   background-color: #083F4D;
 236   z-index: $master-layer;
 237   padding-top: 50px;
 238   opacity: 0;
 239   pointer-events: none;
 240   transition: opacity 350ms $ease-out;
 241
 242   @include rwd($break-menu) {
 243       padding-top: 93px;
 244   }
 245
 246   .l-container {
 247     display: flex;
 248     flex-direction: column;
 249   }
 250
 251   .l-navigation__user-bar {
 252       width: 100%;
 253       height: 50px;
 254       border-width: 1px 0;
 255       border-color: #007880;
 256       border-style: solid;
 257       display: flex;
 258       flex-direction: row;
 259       justify-content: end;
 260       align-items: center;
 261
 262       @include rwd($break-menu) {
 263           display: none;
 264       }
 265
 266       .l-navigation__user-actions {
 267           display: flex;
 268           align-items: center;
 269           gap: 25px;
 270           color: #85C7CC;
 271           a {
 272               color: white;
 273               i {
 274                   color: #85C7CC;
 275                   font-size: 30px;
 276               }
 277           }
 278       }
 279   }
 280 }
 281
 282
 283 .l-navigation__menu__blocks {
 284     position: relative;
 285     display: flex;
 286     width: 100%;
 287     justify-content: space-between;
 288     column-gap: 10%;
 289     row-gap: 30px;
 290     flex-wrap: wrap;
 291     padding-bottom: 80px;
 292
 293     @include rwd($break-menu) {
 294         display: block;
 295         padding-bottom: 0;
 296     }
 297 }
 298
 299 .l-navigation__menu__links {
 300     display: contents;
 301   width: 100%;
 302   justify-content: space-between;
 303   column-gap: 10%;
 304   row-gap: 30px;
 305   flex-wrap: wrap;
 306
 307   @include rwd($break-menu) {
 308       display: flex;
 309       flex-wrap: nowrap;
 310       gap: 3%;
 311   }
 312
 313   ul {
 314     margin: 0;
 315     padding: 0;
 316     list-style: none;
 317     //max-width: 212px;
 318     width: 45%;
 319
 320     @include rwd($break-menu) {
 321       width: 100%;
 322       max-width: 100%;
 323       margin-bottom: 20px;
 324     }
 325
 326     li {
 327       font-weight: $regular;
 328       font-size: 16px;
 329       line-height: 150%;
 330       padding-top: 16px;
 331
 332       @include rwd($break-menu) {
 333           font-size: 18px;
 334           line-height: 115%;
 335       }
 336
 337       strong {
 338         color: #92BD39;
 339         font-weight: $semibold;
 340         @include font-size(21px);
 341         line-height: 140%;
 342         letter-spacing: -0.01em;
 343       }
 344
 345       a {
 346         color: $color-white;
 347         &:hover {
 348           text-decoration: underline;
 349         }
 350       }
 351
 352       hr {
 353         width: 34px;
 354         height: 1px;
 355         background: #007880;
 356         margin-left: 0;
 357         border: 0;
 358       }
 359     }
 360   }
 361 }
 362
 363 .l-navigation__menu__info {
 364   display: flex;
 365   justify-content: space-between;
 366   width: 45%;
 367   padding-top: 16px;
 368
 369   @include rwd($break-menu) {
 370       width: 100%;
 371       padding-top: 58px;
 372       align-items: flex-end;
 373   }
 374
 375 }
 376
 377 .l-navigation__menu__book {
 378     display: flex;
 379     flex-direction: column;
 380     justify-content: space-between;
 381
 382   p {
 383     color: $color-white;
 384     @include font-size(21px);
 385     line-height: 140%;
 386     strong {
 387       color: #92BD39;
 388       letter-spacing: -0.01em;
 389       font-weight: $semibold;
 390     }
 391   }
 392
 393   .button {
 394         display: inline-block;
 395         font-size: 16px;
 396         font-weight: 700;
 397         padding: 0 20px;
 398         line-height: 38px;
 399         text-align: center;
 400
 401         /* green 700 */
 402         background: #92BD39;
 403         color: #083F4D;
 404         border-radius: 6px;
 405
 406         transition: background-color 150ms;
 407
 408         @include rwd($break-menu) {
 409             width: auto;
 410             min-width: 212px;
 411         }
 412
 413         &:hover {
 414             background-color: #FBC40F;
 415         }
 416     }
 417 }
 418
 419 .l-navigation__menu__book__header {
 420     display: flex;
 421     justify-content: space-between;
 422     flex-direction: column;
 423     row-gap: 18px;
 424
 425     @include rwd($break-menu) {
 426         flex-direction: row;
 427         align-items: center;
 428     }
 429
 430     p {
 431         margin: 0;
 432
 433         &.korona {
 434             &:before {
 435                 content: url('../images/korona.svg');
 436                 width: 21px;
 437                 margin-right: -21px;
 438                 position: relative;
 439                 top: -10px;
 440                 left: -3px;
 441             }
 442         }
 443     }
 444 }
 445
 446
 447 .l-navigation__menu__book__info {
 448   display: flex;
 449   margin-top: 20px;
 450   align-items: flex-start;
 451   padding: 12px;
 452   background-color: $color-white;
 453   border-radius: 6px;
 454   color: #808080;
 455
 456   flex-direction: column;
 457   @include rwd($break-menu) {
 458       flex-direction: row;
 459   }
 460
 461   img {
 462     margin-right: 10px;
 463         width: 42px;
 464         height: 60px;
 465   }
 466
 467   h3 {
 468       display: flex;
 469       margin: 0;
 470       font-weight: $regular;
 471       @include font-size(15px);
 472       line-height: 120%;
 473       @include rwd($break-menu) {
 474         width: 203px;
 475       }
 476       strong {
 477           display: block;
 478           font-weight: $semibold;
 479           @include font-size(18px);
 480           line-height: 130%;
 481       }
 482   }
 483
 484   p {
 485     margin: 0;
 486     width: 427px;
 487     font-weight: $regular;
 488     @include font-size(15px);
 489     line-height: 130%;
 490     color: #808080;
 491   }
 492 }
 493
 494 .l-navigation__menu__social {
 495     position: absolute;
 496     left: 0;
 497     right: 0;
 498     bottom: 0;
 499
 500     @include rwd($break-menu) {
 501         position: static;
 502     }
 503
 504
 505   ul {
 506       display: flex;
 507       justify-content: space-between;
 508     list-style: none;
 509     padding: 0;
 510     margin: 0;
 511     li {
 512       &:not(:last-child) {
 513         margin-right: 36px;
 514       }
 515       a {
 516         color: $color-white;
 517         &:hover {
 518           color: #92BD39;
 519         }
 520       }
 521       .icon {
 522         @include font-size(28px);
 523       }
 524     }
 525   }
 526 }