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

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