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