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: flex;
 235   padding: 0 30px;
 236   margin-top: 34px;
 237   margin-bottom: 0;
 238   flex-wrap: wrap;
 239   justify-content: flex-start;
 240 }
 241
 242 .l-checkout__payments__box {
 243   display: flex;
 244   flex-direction: column;
 245   width: calc(33.333% - 20px);
 246   background: #FFFFFF;
 247   border-radius: 10px;
 248   overflow: hidden;
 249   transition: box-shadow $ease-out 250ms;
 250   box-shadow: 0px 0px 0px rgba(55, 170, 156, 0);
 251   margin-bottom: 30px;
 252   margin-right: 30px;
 253
 254   &:nth-child(3) {
 255     margin-right: 0;
 256   }
 257
 258   &:nth-child(5) {
 259     margin-right: 0;
 260     width: calc(67.4% - 20px);
 261   }
 262
 263   h3 {
 264     margin: 0;
 265     font-weight: bold;
 266     font-size: 44px;
 267     line-height: 130%;
 268     letter-spacing: -0.01em;
 269     color: #083F4D;
 270     height: 90px;
 271     display: flex;
 272     align-items: center;
 273     justify-content: center;
 274     transition: all $ease-out 250ms;
 275
 276     span {
 277       font-weight: 600;
 278       font-size: 25px;
 279       line-height: 140%;
 280       letter-spacing: -0.01em;
 281       color: #92BD39;
 282       margin-left: 10px;
 283       transition: opacity $ease-out 250ms;
 284     }
 285   }
 286   .l-checkout__payments__box__btn-wrp {
 287     padding: 20px;
 288     margin-bottom: 0;
 289     margin-top: auto;
 290   }
 291   p {
 292     margin-top: 0;
 293     font-weight: normal;
 294     font-size: 16px;
 295     line-height: 150%;
 296     color: #474747;
 297     padding: 20px;
 298     strong {
 299       font-weight: 600;
 300     }
 301   }
 302   button {
 303     height: 56px;
 304     background: #FFFFFF;
 305     border: 1px solid #92BD39;
 306     border-radius: 3px;
 307     width: 100%;
 308     outline: 0;
 309     cursor: pointer;
 310     font-weight: 600;
 311     font-size: 20px;
 312     line-height: 25px;
 313     display: flex;
 314     align-items: center;
 315     justify-content: center;
 316     text-align: center;
 317     color: #083F4D;
 318     transition: background $ease-out 250ms;
 319
 320     &:hover {
 321       background: rgba(#92BD39, 0.75);
 322     }
 323   }
 324
 325   &.is-active {
 326     box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35);
 327
 328     h3 {
 329       color: white;
 330       background: #083F4D;
 331     }
 332
 333     button {
 334       background: #92BD39;
 335       &:hover {
 336         background: #83AD2B;
 337       }
 338     }
 339   }
 340
 341   &.l-checkout__payments__box--xl {
 342   flex-direction: row;
 343     & > div {
 344       display: flex;
 345       &:first-child {
 346         width: 50%;
 347         flex-wrap: wrap;
 348         max-width: 340px;
 349         margin-right: 20px;
 350       }
 351
 352       &:last-child {
 353         width: 49%;
 354         align-items: center;
 355         justify-content: center;
 356       }
 357     }
 358
 359     h3 {
 360       width: 100%;
 361     }
 362
 363     .l-checkout__payments__box__btn-wrp {
 364       width: 100%;
 365     }
 366
 367     button {
 368       border-color: #FFA500;
 369       background-color: #FFA500;
 370       &:hover {
 371         background: darken(#FFA500, 5%);
 372       }
 373     }
 374
 375     &.once {
 376       h3 {
 377         text-indent: 0;
 378         padding-left: 0;
 379       }
 380     }
 381   }
 382 }
 383
 384 //Amount
 385 .l-checkout__amount {
 386   display: flex;
 387   align-items: flex-end;
 388   justify-content: flex-end;
 389   padding-right: 30px;
 390
 391   button {
 392       border: none;
 393     height: 56px;
 394     background: #083F4D;
 395     border-radius: 3px;
 396     font-weight: 600;
 397     font-size: 20px;
 398     line-height: 25px;
 399     display: flex;
 400     align-items: center;
 401     justify-content: center;
 402     text-align: center;
 403     margin-left: 32px;
 404     color: #FFFFFF;
 405     width: 340px;
 406   }
 407
 408   .l-checkout__input {
 409     width: 340px;
 410   }
 411 }
 412
 413 //Input
 414 .l-checkout__input {
 415   display: flex;
 416   flex-direction: column;
 417
 418   label {
 419     font-style: normal;
 420     font-weight: 600;
 421     font-size: 15px;
 422     line-height: 160%;
 423     color: #083F4D;
 424     span { color: #FF4C54; }
 425   }
 426   input, select, textarea {
 427     height: 56px;
 428     background: #FFFFFF;
 429     border: 1px solid #D5ECED;
 430     border-radius: 3px;
 431     transition: all $ease-out 250ms;
 432     padding: 10px;
 433     outline: 0;
 434
 435     &:focus {
 436       border: 1px solid #007880;
 437     }
 438   }
 439
 440   button {
 441     height: 56px;
 442     background: #083F4D;
 443     border-radius: 3px;
 444     font-weight: 600;
 445     font-size: 20px;
 446     line-height: 25px;
 447     display: flex;
 448     align-items: center;
 449     justify-content: center;
 450     text-align: center;
 451     margin-left: 32px;
 452     color: #FFFFFF;
 453     width: 340px;
 454   }
 455 }
 456
 457 //Cols
 458 .l-checkout__cols {
 459   display: flex;
 460   padding: 0 30px;
 461   margin-top: 50px;
 462
 463   &.bt-w {
 464     margin-top: 30px;
 465     padding-top: 20px;
 466     border-top: 1px solid white;
 467   }
 468 }
 469
 470 .l-checkout__col {
 471   &:nth-child(1) {
 472     width: 402px;
 473     padding-right: 62px;
 474     .l-checkout__payments__box {
 475       width: 100%;
 476     }
 477   }
 478   &:nth-child(2) {
 479     width: calc(100% - 340px);
 480   }
 481   &.full {
 482     width: 100%;
 483     padding-right: 0;
 484
 485     .l-checkout__form__row.full {
 486       flex-direction: row;
 487
 488       & > h3 {
 489         margin-top: 22px;
 490       }
 491
 492       .l-checkout__info {
 493         width: 100%;
 494         padding-left: 100px;
 495       }
 496     }
 497   }
 498 }
 499
 500 .l-checkout__footer__img {
 501   display: flex;
 502   margin-right: 30px;
 503   margin-left: auto;
 504   margin-top: 30px;
 505 }
 506
 507 //Form
 508 .l-checkout__form {
 509   display: flex;
 510   width: 100%;
 511   flex-direction: column;
 512 }
 513
 514 .l-checkout__form__row {
 515   display: flex;
 516   margin-bottom: 24px;
 517
 518   &:nth-child(4) {
 519     .l-checkout__input {
 520       &:nth-child(1) { width: 172px; }
 521       &:nth-child(2) { width: calc(100% - 172px); }
 522     }
 523   }
 524
 525   &.full {
 526     flex-direction: column;
 527
 528     .l-checkout__input {
 529       &:nth-child(1) {
 530         padding-right: 0;
 531       }
 532       &:nth-child(2) {
 533         padding-left: 0;
 534       }
 535     }
 536   }
 537
 538   h3 {
 539     margin-top: 0;
 540     font-weight: 600;
 541     font-size: 21.5px;
 542     line-height: 140%;
 543     letter-spacing: -0.01em;
 544     color: #083F4D;
 545   }
 546
 547   .iframe {
 548     margin-top: 16px;
 549   }
 550
 551   .l-checkout__input {
 552     width: 100%;
 553     &:nth-child(1) {
 554       padding-right: 10px;
 555     }
 556     &:nth-child(2) {
 557       padding-left: 10px;
 558     }
 559   }
 560
 561   & > a {
 562     font-weight: 600;
 563     font-size: 20px;
 564     line-height: 25px;
 565     color: #74BDC2;
 566     transition: all $ease-out 250ms;
 567
 568     &:hover {
 569       color: #007880;
 570     }
 571   }
 572
 573   &.confirm {
 574     display: flex;
 575     align-items: center;
 576     justify-content: space-between;
 577     width: 100%;
 578
 579     .l-checkout__input {
 580       width: auto;
 581     }
 582   }
 583   .errorlist {
 584       padding: 0;
 585       margin: 0;
 586       list-style: none;
 587       color: #FF4C54;
 588       li:before {
 589           content: '⚠ ';
 590       }
 591   }
 592 }
 593
 594 //Info
 595 .l-checkout__info__item {
 596   position: relative;
 597   display: flex;
 598   align-items: center;
 599   justify-content: space-between;
 600   transition: all $ease-out 250ms;
 601   width: 100%;
 602   overflow: hidden;
 603   margin-top: 15px;
 604
 605   &:hover {
 606     background-color: darken(#E1F1F2, 2%);
 607   }
 608
 609   div {
 610     font-weight: normal;
 611     font-size: 15px;
 612     line-height: 150%;
 613     color: #083F4D;
 614     width: 100px;
 615   }
 616
 617   h3 {
 618     width: 426px;
 619     font-weight: 500;
 620     font-size: 18px;
 621     line-height: 150%;
 622     color: #083F4D;
 623     padding-left: 30px;
 624   }
 625
 626   button {
 627     outline: 0;
 628     background: transparent;
 629     border: 0;
 630     cursor: pointer;
 631     display: flex;
 632     align-items: center;
 633     justify-content: center;
 634     margin-right: 0;
 635     margin-left: auto;
 636     &:hover {
 637       opacity: 0.75;
 638     }
 639   }
 640   input {
 641     top: 0;
 642     left: 0;
 643     position: absolute;
 644     transform: translate(-100%,-100%);
 645   }
 646 }
 647
 648 //Completed
 649 .l-checkout__completed {
 650   display: flex;
 651   align-items: center;
 652   justify-content: center;
 653   flex-direction: column;
 654   margin: auto;
 655   padding: 140px 0;
 656   background: url(../images/checkout-bg.png) no-repeat center;
 657
 658   .l-checkout__completed__wrapper {
 659     max-width: 580px;
 660     display: flex;
 661     align-items: center;
 662     justify-content: center;
 663     flex-direction: column;
 664   }
 665
 666   h1 {
 667     margin-top: 0;
 668     font-style: italic;
 669     font-weight: 300;
 670     font-size: 58px;
 671     line-height: 55px;
 672     letter-spacing: -0.02em;
 673     color: #083F4D;
 674   }
 675   p {
 676     margin-top: 30px;
 677     font-weight: normal;
 678     font-size: 21.5px;
 679     line-height: 140%;
 680     text-align: center;
 681     letter-spacing: -0.01em;
 682     color: #007880;
 683   }
 684   a {
 685     margin-top: 50px;
 686     font-weight: 600;
 687     font-size: 20px;
 688     line-height: 25px;
 689     display: flex;
 690     align-items: center;
 691     justify-content: center;
 692     background: #083F4D;
 693     border-radius: 3px;
 694     height: 56px;
 695     text-align: center;
 696     color: #FFFFFF;
 697     width: 340px;
 698   }
 699 }
 700
 701 //Footer
 702 .l-checkout__footer {
 703   display: flex;
 704   flex-wrap: wrap;
 705   margin-top: 12px;
 706   margin-bottom: 52px;
 707 }
 708
 709 .l-checkout__footer > img {
 710   margin-right: 0;
 711   margin-left: auto;
 712 }
 713
 714 .l-checkout__footer__content {
 715   display: flex;
 716   flex-direction: column;
 717 }
 718
 719 .l-checkout__footer__content__item {
 720   display: flex;
 721
 722   &:not(:last-child) {
 723     padding-bottom: 30px;
 724     margin-bottom: 30px;
 725     border-bottom: 1px solid #E1F1F2;
 726   }
 727 }
 728
 729 .l-checkout__footer__content h3 {
 730   font-weight: 600;
 731   font-size: 21.5px;
 732   line-height: 140%;
 733   letter-spacing: -0.01em;
 734   color: #083F4D;
 735   width: 318px;
 736 }
 737
 738 .l-checkout__footer__content__item > div {
 739   width: 100%;
 740   padding-left: 120px;
 741 }
 742
 743 .l-checkout__footer__content__item > div p {
 744   font-weight: normal;
 745   font-size: 15px;
 746   line-height: 150%;
 747   color: #808080;
 748 }
 749
 750 .l-checkout__footer__content__item > div p a {
 751   color: #007880;
 752   &:hover {
 753     text-decoration: underline;
 754   }
 755 }
 756
 757 .l-checkout__footer__content {
 758   .l-article__read-more {
 759     margin-top: 20px;
 760     font-size: 15px;
 761     &:after {
 762       margin-left: 5px;
 763       display: inline-block;
 764       transform: rotate(180deg);
 765       content: $icon-arrow-up;
 766       font-family: '#{$icomoon-font-family}' !important;
 767       font-size: 12px;
 768       speak: never;
 769       font-style: normal;
 770       font-weight: normal;
 771       font-variant: normal;
 772       text-transform: none;
 773       line-height: 1;
 774
 775       /* Better Font Rendering =========== */
 776       -webkit-font-smoothing: antialiased;
 777       -moz-osx-font-smoothing: grayscale;
 778     }
 779   }
 780
 781   .l-article__overlay {
 782     &:after {
 783       display: none;
 784     }
 785     &.is-clicked {
 786       & + .l-article__read-more {
 787         &:after {
 788           transform: none;
 789         }
 790       }
 791     }
 792   }
 793 }