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

   1 //Support bar
   2 .l-checkout__support {
   3     margin-bottom: 22px;
   4
   5     margin-left: 16px;
   6     margin-right: 16px;
   7 }
   8
   9 .l-checkout__support__bar {
  10   background: #E6F0F1 url(../images/approval.svg) center right 5px no-repeat;
  11   border-radius: 10px;
  12   width: 100%; height: 34px;
  13   position: relative;
  14   span {
  15     position: absolute;
  16     top: 0; left: 0;
  17     height: 100%;
  18     background: #92BD39;
  19     border-radius: 10px;
  20     &:after {
  21       margin: auto;
  22       position: absolute;
  23       top: 0; right: 13px; bottom: 2px;
  24       content: attr(data-label);
  25       font-weight: bold;
  26       font-size: 15px;
  27       color: #FFFFFF;
  28       display: flex;
  29       align-items: center;
  30       justify-content: center;
  31     }
  32   }
  33 }
  34
  35 .l-checkout__support__footer {
  36   display: flex;
  37   margin-top: 7px;
  38   justify-content: space-between;
  39   align-items: center;
  40   p {
  41     margin: 0;
  42     font-weight: normal;
  43     font-size: 15px;
  44     line-height: 150%;
  45     color: #083F4D;
  46   }
  47 }
  48
  49 //Box
  50 .l-checkout__box {
  51   background: #E1F1F2;
  52   border-radius: 10px;
  53   padding-bottom: 30px;
  54   overflow: hidden;
  55   margin: 0 16px;
  56 }
  57
  58 .l-checkout__box__header {
  59   display: flex;
  60   background: #083F4D;
  61
  62   img {
  63       display: none;
  64       @include rwd($break-flow) {
  65           display: block;
  66       }
  67   }
  68 }
  69
  70 .l-checkout__box__header__content h1 {
  71   font-style: italic;
  72   font-weight: 300;
  73   font-size: 48px;
  74   line-height: 55px;
  75   letter-spacing: -0.02em;
  76   color: #92BD39;
  77   margin: 0;
  78 }
  79
  80 .l-checkout__box__header__content p:first-of-type {
  81   font-style: normal;
  82   font-weight: 600;
  83   font-size: 21.5px;
  84   line-height: 140%;
  85   letter-spacing: -0.01em;
  86   color: #FFFFFF;
  87   margin-top: 23px;
  88 }
  89
  90 .l-checkout__box__header__content p {
  91   font-weight: normal;
  92   font-size: 18px;
  93   line-height: 150%;
  94   color: #FFFFFF;
  95   margin-top: 8px;
  96   max-width: 410px;
  97 }
  98
  99 .l-checkout__box__header__content {
 100   padding: 32px 45px;
 101 }
 102
 103 //Steps
 104 .l-checkout__steps {
 105   display: flex;
 106   margin-top: -24px;
 107   justify-content: space-around;
 108
 109   @include rwd($break-flow) {
 110       padding: 0 125px;
 111       justify-content: space-between;
 112   }
 113
 114   div {
 115     width: 145px;
 116     display: flex;
 117     flex-direction: column;
 118     align-items: center;
 119     justify-content: center;
 120
 121     span {
 122       width: 46px;
 123       height: 46px;
 124       background: #86AD34;
 125       color: white;
 126       border-radius: 50%;
 127       display: flex;
 128       align-items: center;
 129       justify-content: center;
 130       font-weight: 600;
 131       font-size: 21px;
 132       line-height: 140%;
 133       letter-spacing: -0.01em;
 134     }
 135
 136     p {
 137       margin-top: 4px;
 138       font-weight: 600;
 139       font-size: 21px;
 140       line-height: 140%;
 141       text-align: center;
 142       letter-spacing: -0.01em;
 143       color: #083F4D;
 144       display: none;
 145       @include rwd($break-flow) {
 146           display: block;
 147       }
 148     }
 149
 150     &.is-completed {
 151       span {
 152         overflow: hidden;
 153         text-indent: -999px;
 154         background: #86AD34 url(../images/check.svg) center no-repeat;
 155       }
 156     }
 157
 158     &.is-inactive {
 159       span {
 160         background: #ffffff;
 161         color: #003C3C;
 162       }
 163       p {
 164         color: #74BDC2;
 165         font-weight: normal;
 166       }
 167     }
 168   }
 169 }
 170
 171 //Switch
 172 .l-switch__wrapper {
 173   display: flex;
 174   align-items: center;
 175   justify-content: center;
 176   margin-top: 35px;
 177 }
 178
 179 .l-switch {
 180   background: #fff;
 181   display: block;
 182   position: relative;
 183   height: 26px;
 184   width: 77px;
 185   border-radius: 4px;
 186 }
 187
 188 .l-switch label {
 189   color: #fff;
 190   font-weight: 600;
 191   font-size: 21.5px;
 192   line-height: 26px;
 193   transition: color .2s ease;
 194   width: 122px;
 195   cursor: pointer;
 196 }
 197
 198 .l-switch label:nth-of-type(1) {
 199   left: -175%;
 200   position: absolute;
 201   text-align: right;
 202 }
 203
 204 .l-switch label:nth-of-type(2) {
 205   position: absolute;
 206   right: -175%;
 207   text-align: left;
 208 }
 209
 210 .l-switch input {
 211   left: 0;
 212   opacity: 0;
 213   position: absolute;
 214   top: 0;
 215   height: 26px;
 216   width: 77px;
 217   z-index: 2;
 218 }
 219
 220 .l-switch input:checked~label:nth-of-type(1) { color: #003C3C; }
 221 .l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; }
 222
 223 .l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; }
 224 .l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; }
 225
 226 .l-switch input:checked~.toggle {
 227   left: 5px;
 228 }
 229
 230 .l-switch input~:checked~.toggle {
 231   left: 39px;
 232 }
 233
 234 .l-switch input:checked {
 235   z-index: 0;
 236 }
 237
 238 .toggle {
 239   background: #003C3C;
 240   left: 0;
 241   position: absolute;
 242   top: 5px;
 243   transition: left .2s ease;
 244   height: 16px;
 245   width: 33px;
 246   z-index: 1;
 247   border-radius: 2px;
 248   cursor: pointer;
 249 }
 250
 251 //Payments
 252 .l-checkout__payments {
 253     display: none;
 254     padding: 0 16px;
 255   margin-top: 34px;
 256   margin-bottom: 0;
 257   flex-wrap: wrap;
 258   justify-content: flex-start;
 259   flex-direction: row;
 260   column-gap: 16px;
 261
 262   @include rwd($break-flow) {
 263       //flex-direction: row;
 264       padding: 0 30px;
 265       column-gap: 30px;
 266   }
 267 }
 268
 269 .l-checkout__payments__box {
 270   display: flex;
 271   flex-direction: column;
 272   background: #FFFFFF;
 273   border-radius: 10px;
 274   overflow: hidden;
 275   transition: box-shadow $ease-out 250ms;
 276   box-shadow: 0px 0px 0px rgba(55, 170, 156, 0);
 277   margin-bottom: 30px;
 278   width: calc(50% - 8px);
 279
 280   &.narrow-wide {
 281       flex-direction: row;
 282       width: 100%;
 283   }
 284
 285   @include rwd($break-flow) {
 286       width: calc(33.333% - 20px);
 287   }
 288   h3 {
 289     margin: 0;
 290     font-weight: bold;
 291     font-size: 44px;
 292     line-height: 130%;
 293     letter-spacing: -0.01em;
 294     color: #083F4D;
 295     height: 90px;
 296     display: flex;
 297     align-items: center;
 298     justify-content: center;
 299     transition: all $ease-out 250ms;
 300
 301     span {
 302       font-weight: 600;
 303       font-size: 25px;
 304       line-height: 140%;
 305       letter-spacing: -0.01em;
 306       color: #92BD39;
 307       margin-left: 10px;
 308       transition: opacity $ease-out 250ms;
 309     }
 310   }
 311   .l-checkout__payments__box__btn-wrp {
 312     padding: 0 20px 20px 20px;
 313     margin-bottom: 0;
 314     margin-top: auto;
 315     @include rwd($break-flow) {
 316         padding-top: 20px;
 317     }
 318   }
 319   p {
 320     margin-top: 0;
 321     font-weight: normal;
 322     font-size: 16px;
 323     line-height: 150%;
 324     color: #474747;
 325     padding: 20px;
 326     strong {
 327       font-weight: 600;
 328     }
 329   }
 330   button {
 331     height: 56px;
 332     background: #FFFFFF;
 333     border: 1px solid #92BD39;
 334     border-radius: 3px;
 335     width: 100%;
 336     outline: 0;
 337     cursor: pointer;
 338     font-weight: 600;
 339     font-size: 16px;
 340     line-height: 24px;
 341     display: flex;
 342     align-items: center;
 343     justify-content: center;
 344     text-align: center;
 345     color: #083F4D;
 346     transition: background $ease-out 250ms;
 347
 348     @include rwd($break-flow) {
 349         font-size: 20px;
 350         line-height: 25px;
 351     }
 352
 353     &:hover {
 354       background: rgba(#92BD39, 0.75);
 355     }
 356   }
 357
 358   &.is-active {
 359       box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
 360       background: #083F4D;
 361       color: white;
 362
 363       @include rwd($break-flow) {
 364           background: white;
 365           color: black;
 366       }
 367     h3 {
 368       color: white;
 369       background: #083F4D;
 370     }
 371
 372     button {
 373       background: #92BD39;
 374       &:hover {
 375         background: #83AD2B;
 376       }
 377     }
 378   }
 379
 380   &.l-checkout__payments__box--xl {
 381       width: 100%;
 382       @include rwd($break-flow) {
 383           width: calc(67.4% - 20px);
 384           width: calc(67.4% - 20px);
 385           flex-direction: row;
 386           & > div {
 387               display: flex;
 388               &:first-child {
 389                   width: 50%;
 390                   flex-wrap: wrap;
 391                   max-width: 340px;
 392                   margin-right: 20px;
 393               }
 394
 395               &:last-child {
 396                   width: 49%;
 397                   align-items: center;
 398                   justify-content: center;
 399               }
 400           }
 401       }
 402
 403     h3 {
 404       width: 100%;
 405     }
 406
 407     .l-checkout__payments__box__btn-wrp {
 408       width: 100%;
 409     }
 410
 411     &.once {
 412       h3 {
 413         text-indent: 0;
 414         padding-left: 0;
 415       }
 416     }
 417   }
 418   &.l-checkout__payments__box--special {
 419     button {
 420       border-color: #FFA500;
 421       background-color: #FFA500;
 422       &:hover {
 423         background: darken(#FFA500, 5%);
 424       }
 425     }
 426   }
 427 }
 428
 429 //Amount
 430 .l-checkout__amount {
 431   display: flex;
 432   flex-direction: column;
 433   padding: 0 16px;
 434   row-gap: 16px;
 435
 436   @include rwd($break-flow) {
 437       flex-direction: row;
 438       align-items: flex-end;
 439       justify-content: flex-end;
 440       padding-right: 30px;
 441   }
 442
 443   button {
 444       border: none;
 445     height: 56px;
 446     background: #083F4D;
 447     border-radius: 3px;
 448     font-weight: 600;
 449     font-size: 20px;
 450     line-height: 25px;
 451     display: flex;
 452     align-items: center;
 453     justify-content: center;
 454     text-align: center;
 455     color: #FFFFFF;
 456
 457     @include rwd($break-flow) {
 458         margin-left: 32px;
 459         width: 340px;
 460     }
 461
 462   }
 463
 464   .l-checkout__input {
 465       @include rwd($break-flow) {
 466           width: 340px;
 467       }
 468   }
 469 }
 470
 471 //Input
 472 .l-checkout__input {
 473   display: flex;
 474   flex-direction: column;
 475
 476   label {
 477     font-style: normal;
 478     font-weight: 600;
 479     font-size: 15px;
 480     line-height: 160%;
 481     color: #083F4D;
 482     span { color: #FF4C54; }
 483   }
 484   input, select, textarea {
 485     height: 56px;
 486     background: #FFFFFF;
 487     border: 1px solid #D5ECED;
 488     border-radius: 3px;
 489     transition: all $ease-out 250ms;
 490     padding: 10px;
 491     outline: 0;
 492
 493     &:focus {
 494       border: 1px solid #007880;
 495     }
 496   }
 497
 498   button {
 499     height: 56px;
 500     background: #083F4D;
 501     border-radius: 3px;
 502     font-weight: 600;
 503     font-size: 20px;
 504     line-height: 25px;
 505     display: flex;
 506     align-items: center;
 507     justify-content: center;
 508     text-align: center;
 509     margin-left: 32px;
 510     color: #FFFFFF;
 511     width: 340px;
 512   }
 513 }
 514
 515 //Cols
 516 .l-checkout__cols {
 517   display: flex;
 518   flex-direction: column;
 519   margin-top: 50px;
 520   padding: 0 16px;
 521
 522   @include rwd($break-flow) {
 523       padding: 0 30px;
 524       flex-direction: row;
 525   }
 526
 527   &.bt-w {
 528     margin-top: 30px;
 529     padding-top: 20px;
 530     border-top: 1px solid white;
 531   }
 532 }
 533
 534 .l-checkout__col {
 535   @include rwd($break-flow) {
 536   &:nth-child(1) {
 537     width: 402px;
 538     padding-right: 62px;
 539     .l-checkout__payments__box {
 540       width: 100%;
 541     }
 542   }
 543   &:nth-child(2) {
 544     width: calc(100% - 340px);
 545   }
 546   &.full {
 547     width: 100%;
 548     padding-right: 0;
 549
 550     .l-checkout__form__row.full {
 551       flex-direction: row;
 552
 553       & > h3 {
 554         margin-top: 22px;
 555       }
 556
 557       .l-checkout__info {
 558         width: 100%;
 559         padding-left: 100px;
 560       }
 561     }
 562   }
 563   }
 564 }
 565
 566 .l-checkout__secure {
 567     margin-top: 30px;
 568     margin-right: 30px;
 569     text-align: right;
 570     font-size: 15px;
 571     color: #888;
 572
 573     .l-checkout__secure__padlock {
 574         margin-right: 5px;
 575         vertical-align: baseline;
 576     }
 577
 578     .l-checkout__secure__img {
 579         margin-left: 10px;
 580         vertical-align: bottom;
 581     }
 582 }
 583
 584
 585 //Form
 586 .l-checkout__form {
 587   display: flex;
 588   width: 100%;
 589   flex-direction: column;
 590 }
 591
 592 .l-checkout__form__row {
 593   display: flex;
 594   margin-bottom: 24px;
 595
 596   &:nth-child(4) {
 597     .l-checkout__input {
 598       &:nth-child(1) { width: 172px; }
 599       &:nth-child(2) { width: calc(100% - 172px); }
 600     }
 601   }
 602
 603   &.full {
 604     flex-direction: column;
 605
 606     .l-checkout__input {
 607       &:nth-child(1) {
 608         padding-right: 0;
 609       }
 610       &:nth-child(2) {
 611         padding-left: 0;
 612       }
 613     }
 614   }
 615
 616   h3 {
 617     margin-top: 0;
 618     font-weight: 600;
 619     font-size: 21.5px;
 620     line-height: 140%;
 621     letter-spacing: -0.01em;
 622     color: #083F4D;
 623   }
 624
 625   .iframe {
 626     margin-top: 16px;
 627   }
 628
 629   .l-checkout__input {
 630     width: 100%;
 631     &:nth-child(1) {
 632       padding-right: 10px;
 633     }
 634     &:nth-child(2) {
 635       padding-left: 10px;
 636     }
 637   }
 638
 639   & > a {
 640     font-weight: 600;
 641     font-size: 20px;
 642     line-height: 25px;
 643     color: #74BDC2;
 644     transition: all $ease-out 250ms;
 645
 646     &:hover {
 647       color: #007880;
 648     }
 649   }
 650
 651   &.confirm {
 652     display: flex;
 653     align-items: center;
 654     justify-content: space-between;
 655     width: 100%;
 656
 657     .l-checkout__input {
 658       width: auto;
 659     }
 660   }
 661   .errorlist {
 662       padding: 0;
 663       margin: 0;
 664       list-style: none;
 665       color: #FF4C54;
 666       li:before {
 667           content: '⚠ ';
 668       }
 669   }
 670 }
 671
 672 //Info
 673 .l-checkout__info__item {
 674   position: relative;
 675   display: flex;
 676   align-items: center;
 677   justify-content: space-between;
 678   transition: all $ease-out 250ms;
 679   width: 100%;
 680   overflow: hidden;
 681   margin-top: 15px;
 682
 683   &:hover {
 684     background-color: darken(#E1F1F2, 2%);
 685   }
 686
 687   div {
 688     font-weight: normal;
 689     font-size: 15px;
 690     line-height: 150%;
 691     color: #083F4D;
 692     width: 100px;
 693   }
 694
 695   h3 {
 696     width: 426px;
 697     font-weight: 500;
 698     font-size: 18px;
 699     line-height: 150%;
 700     color: #083F4D;
 701     padding-left: 30px;
 702   }
 703
 704   button {
 705     outline: 0;
 706     background: transparent;
 707     border: 0;
 708     cursor: pointer;
 709     display: flex;
 710     align-items: center;
 711     justify-content: center;
 712     margin-right: 0;
 713     margin-left: auto;
 714     &:hover {
 715       opacity: 0.75;
 716     }
 717   }
 718   input {
 719     top: 0;
 720     left: 0;
 721     position: absolute;
 722     transform: translate(-100%,-100%);
 723   }
 724 }
 725
 726 //Completed
 727 .l-checkout__completed {
 728   display: flex;
 729   align-items: center;
 730   justify-content: center;
 731   flex-direction: column;
 732   margin: auto;
 733   padding: 140px 0;
 734   background: url(../images/checkout-bg.png) no-repeat center;
 735
 736   .l-checkout__completed__wrapper {
 737     max-width: 580px;
 738     display: flex;
 739     align-items: center;
 740     justify-content: center;
 741     flex-direction: column;
 742   }
 743
 744   h1 {
 745     margin-top: 0;
 746     font-style: italic;
 747     font-weight: 300;
 748     font-size: 58px;
 749     line-height: 55px;
 750     letter-spacing: -0.02em;
 751     color: #083F4D;
 752   }
 753   p {
 754     margin-top: 30px;
 755     font-weight: normal;
 756     font-size: 21.5px;
 757     line-height: 140%;
 758     text-align: center;
 759     letter-spacing: -0.01em;
 760     color: #007880;
 761   }
 762   a {
 763     margin-top: 50px;
 764     font-weight: 600;
 765     font-size: 20px;
 766     line-height: 25px;
 767     display: flex;
 768     align-items: center;
 769     justify-content: center;
 770     background: #083F4D;
 771     border-radius: 3px;
 772     height: 56px;
 773     text-align: center;
 774     color: #FFFFFF;
 775     width: 340px;
 776   }
 777 }
 778
 779 //Footer
 780 .l-checkout__footer {
 781   display: flex;
 782   flex-wrap: wrap;
 783   margin-top: 12px;
 784   margin-bottom: 52px;
 785   margin-left: 16px;
 786   margin-right: 16px;
 787 }
 788
 789 .l-checkout__footer > img {
 790   margin-right: 0;
 791   margin-left: auto;
 792 }
 793
 794 .l-checkout__footer__content {
 795   display: flex;
 796   flex-direction: column;
 797 }
 798
 799 .l-checkout__footer__content__item {
 800   display: flex;
 801   flex-direction: column;
 802
 803   @include rwd($break-flow) {
 804       flex-direction: row;
 805   }
 806
 807   &:not(:last-child) {
 808     padding-bottom: 30px;
 809     margin-bottom: 30px;
 810     border-bottom: 1px solid #E1F1F2;
 811   }
 812 }
 813
 814 .l-checkout__footer__content h3 {
 815   @include rwd($break-flow) {
 816   font-weight: 600;
 817   font-size: 21.5px;
 818   line-height: 140%;
 819   letter-spacing: -0.01em;
 820   color: #083F4D;
 821   width: 318px;
 822   }
 823 }
 824
 825 .l-checkout__footer__content__item > div {
 826   @include rwd($break-flow) {
 827   width: 100%;
 828   padding-left: 120px;
 829   }
 830 }
 831
 832 .l-checkout__footer__content__item > div p {
 833   font-weight: normal;
 834   font-size: 15px;
 835   line-height: 150%;
 836   color: #808080;
 837 }
 838
 839 .l-checkout__footer__content__item > div p a {
 840   color: #007880;
 841   &:hover {
 842     text-decoration: underline;
 843   }
 844 }
 845
 846 .l-checkout__footer__content {
 847   .l-article__read-more {
 848     margin-top: 20px;
 849     font-size: 15px;
 850     &:after {
 851       margin-left: 5px;
 852       display: inline-block;
 853       transform: rotate(180deg);
 854       content: $icon-arrow-up;
 855       font-family: '#{$icomoon-font-family}' !important;
 856       font-size: 12px;
 857       speak: never;
 858       font-style: normal;
 859       font-weight: normal;
 860       font-variant: normal;
 861       text-transform: none;
 862       line-height: 1;
 863
 864       /* Better Font Rendering =========== */
 865       -webkit-font-smoothing: antialiased;
 866       -moz-osx-font-smoothing: grayscale;
 867     }
 868   }
 869
 870   .l-article__overlay {
 871     &:after {
 872       display: none;
 873     }
 874     &.is-clicked {
 875       & + .l-article__read-more {
 876         &:after {
 877           transform: none;
 878         }
 879       }
 880     }
 881   }
 882 }
 883
 884
 885
 886
 887
 888 .toggle-input{
 889     &#switch-once:checked {
 890         ~.l-switch__wrapper {
 891             label {
 892                 &:nth-of-type(1) { color: #003C3C; }
 893                 &:nth-of-type(2) { color: #74BDC2; }
 894             }
 895             .toggle {
 896                 left: 5px;
 897             }
 898         }
 899         ~.payments-once {
 900             display: flex;
 901         }
 902     }
 903     &#switch-monthly:checked {
 904         ~.l-switch__wrapper {
 905             label {
 906                 &:nth-of-type(1) { color: #74BDC2; }
 907                 &:nth-of-type(2) { color: #003C3C; }
 908             }
 909             .toggle {
 910                 left: 39px;
 911             }
 912         }
 913         ~.payments-recurring {
 914             display: flex;
 915         }
 916     }
 917 }
 918
 919
 920 .payments-recurring {
 921     .l-checkout__payments__box {
 922         width: 100%;
 923         &.is-active {
 924             background: white;
 925             color: black;
 926         }
 927         @include rwd($break-flow) {
 928             width: calc(33.333% - 20px);
 929             //margin-right: 30px;
 930         }
 931     }
 932 }