You are here

Home » API reference » Commerce PayPal 8

paypal-checkout.css in Commerce PayPal 8 

@media all and (min-width: 61em) {
  .path-cart .paypal-buttons-container {
    float: right;
    width: 40%;
  }
  .path-cart .cart-form {
    clear: right;
  }
}
#paypal-background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paypal-background-overlay-loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: paypal-spin-loader 2s linear infinite;
}
@keyframes paypal-spin-loader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

File

css/paypal-checkout.css
View source 
  1. @media all and (min-width: 61em) {

  2.   .path-cart .paypal-buttons-container {

  3.     float: right;

  4.     width: 40%;

  5.   }

  6.   .path-cart .cart-form {

  7.     clear: right;

  8.   }

  9. }

  10. #paypal-background-overlay {

  11.   position: fixed;

  12.   top: 0;

  13.   left: 0;

  14.   bottom: 0;

  15.   right: 0;

  16.   background-color: rgba(0, 0, 0, 0.5);

  17.   z-index: 200;

  18.   display: flex;

  19.   align-items: center;

  20.   justify-content: center;

  21. }

  22. .paypal-background-overlay-loader {

  23.   border: 16px solid #f3f3f3;

  24.   border-top: 16px solid #3498db;

  25.   border-radius: 50%;

  26.   width: 120px;

  27.   height: 120px;

  28.   animation: paypal-spin-loader 2s linear infinite;

  29. }

  30. @keyframes paypal-spin-loader {

  31.   0% { transform: rotate(0deg); }

  32.   100% { transform: rotate(360deg); }

  33. }