sprinque-js-sdk-wip/dist/src/step-5/style.js

UI kit to implement Pay by Invoice with Sprinque

import { ACTIVE_ITEM_COLOR, BORDER_COLOR, LIGHT_COLOR } from '../styles';
export const STYLE_STEP_5 = `
<style>
  .payment-term-item label {
    
  }
  /*From https://www.w3schools.com/howto/howto_css_custom_checkbox.asp*/
  /* Customize the label (the payment-term-item) */
  .payment-term-item {
    position: relative;
    padding: 10px 10px 10px 40px;
    margin: 10px 0;
    font-weight: normal;
    color: ${ACTIVE_ITEM_COLOR};
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid ${BORDER_COLOR};
  }
  .payment-term-item:has(input:checked)  {
    border: 1px solid ${ACTIVE_ITEM_COLOR};
  }
  
  /* Hide the browser's default radio button */
  .payment-term-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  /* Create a custom radio button */
  .checkmark {
    position: absolute;
    top: 12px;
    left: 11px;
    height: 20px;
    width: 20px;
    background-color: ${BORDER_COLOR};
    border-radius: 50%;
    transition: background-color 0.2s;
  }
  
  /* On mouse-over, add a grey background color */
  .payment-term-item:hover input ~ .checkmark {
    background-color: #ccc;
  }
  
  /* When the radio button is checked, add a blue background */
  .payment-term-item input:checked ~ .checkmark {
    background-color: ${ACTIVE_ITEM_COLOR};
  }
  
  /* Create the indicator (the dot/circle - hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the indicator (dot/circle) when checked */
  .payment-term-item input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the indicator (dot/circle) */
  .payment-term-item .checkmark:after {
    top: 6px;
    left: 5px;
    width: 8px;
    height: 4px;
    border-left: 2px solid ${LIGHT_COLOR};
    border-bottom: 2px solid ${LIGHT_COLOR};
    rotate: -47deg;
  }
</style>
`;