All files / src/app/core/utils/paypal/adapters paypal-adapters.styling.ts

100% Statements 3/3
100% Branches 0/0
100% Functions 0/0
100% Lines 3/3

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87              6x                                                                             6x                                   6x                                            
/**
 * Styling Configuration for PayPal Messages
 *
 * @see {@link https://developer.paypal.com/sdk/js/reference} PayPal Style Reference
 */
 
// Styling configuration for Pay Later messages.
export const PAYPAL_MESSAGE_STYLING = {
  //  on home page
  home: {
    layout: 'flex',
    color: 'white-no-border',
    ratio: '20x1',
  },
  // on category/listing pages.
  category: {
    layout: 'flex',
    color: 'white-no-border',
  },
  // on product detail pages.
  product: {
    layout: 'text',
    color: 'black',
    logo: {
      type: 'inline',
    },
  },
  // on cart page.
  cart: {
    layout: 'text',
    color: 'black',
    logo: {
      type: 'inline',
    },
  },
  // on checkout (payment) page.
  checkout: {
    layout: 'text',
    color: 'black',
    logo: {
      type: 'inline',
    },
  },
};
 
// Styling configuration for PayPal buttons.
export const PAYPAL_BUTTON_STYLING = {
  // PayPal express buttons on cart page.
  cart: {
    shape: 'sharp',
    label: 'paypal',
    height: 40,
    tagline: false,
  },
  // PayPal checkout buttons on checkout (payment) page.
  checkout: {
    shape: 'sharp',
    label: 'paypal',
    height: 40,
    tagline: false,
  },
};
 
// General Styling configuration for PayPal card fields.
export const PAYPAL_CART_FIELDS_STYLING = {
  body: {
    padding: '0',
  },
  input: {
    'font-size': '0.875rem',
    'font-weight': '400',
    'font-family': 'inherit',
    'border-radius': '0',
    'line-height': '21px',
    padding: '0.375rem 0.75rem',
    border: '1px solid #757575',
  },
  'input:focus-visible': {
    outline: 'revert !important',
  },
  'input:focus': {
    border: '1px solid #757575',
    'box-shadow': 'none',
  },
  '.invalid': { color: '#dc3545', border: '1px solid #dc3545', 'box-shadow': 'none' },
};