sprinque-js-sdk-wip/dist/src/styles.js

UI kit to implement Pay by Invoice with Sprinque

import { VALIDATION_ERROR_CLASS_PREFIX } from './constants';
export const FORM_ELEM_COLOR = '#6266A7';
export const ACTIVE_ITEM_COLOR = '#000339';
export const DISABLED_COLOR = '#B6B8E2';
export const LIGHT_COLOR = '#fff';
export const BORDER_COLOR = '#e8e4e4';
export const ERROR_COLOR = '#ee3f75';
export const MAIN_STYLES = `
<style>
  :host * {
    font-size: 14px;
  }
  :host h3, :host span, :host div {
    color: ${ACTIVE_ITEM_COLOR};
  }
  :host h3 {
    font-size: 20px;
  }
  :host p {
    margin: 0;
  }
  /*main*/
  .sprinque-modal-wrapper {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .sprinque-modal {
    position: relative;
    font-family: sans-serif;
    background: ${LIGHT_COLOR};
    width: 400px;
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 10px;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
  }
  .sprinque-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .sprinque-stepper {
    color: ${ACTIVE_ITEM_COLOR};
    font-weight: bold;
    white-space: nowrap;
    font-size: 16px;
  }
  .sprinque-api-error {
    background: ${ERROR_COLOR};
    color: ${LIGHT_COLOR};
    padding: 4px;
    font-size: 14px;
  }
  .close-btn {
    font-size: 26px;
    cursor: pointer;
    font-weight: 100;
    color: ${ACTIVE_ITEM_COLOR};
    position: absolute;
    right: 20px;
    top: 20px;
  }
  /* logo */
  .sprinque-logo-wrapper {
    text-align: center;
    min-height: 50px;
  }
  .sprinque-logo {
    max-width: 200px;
    max-height: 50px;
  }
  /* form */
  label {
    display: block;
    font-weight: bold;
    color: ${FORM_ELEM_COLOR};
    margin-top: 20px;
    padding: 5px 0;
  }
  .sprinque-modal label span {color: ${FORM_ELEM_COLOR};}
  
  input, select {
    display: block;
    border: 1px solid ${DISABLED_COLOR};
    border-radius: 4px;
    width: calc(100% - 20px);
    font-size: 16px;
    padding: 8px 10px;
  }
  input:active, input:focus, select:focus {
    border-color: ${ACTIVE_ITEM_COLOR};
    color: ${ACTIVE_ITEM_COLOR};
    outline: none;
  }
   select {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAPCAYAAAARZmTlAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADqSURBVHgBpdHNDYIwFAfw1yfx7AiMoHEB3cELXqwmuoa4gWc00BsnD04gCxhX6ByGFFuCiamltPBPCP14fb8mJSBDaTaBIJhCGXDGIg4Do/cjlOYhjuEh90L5cfGG5RDI1A9xLGizoFIXqELoEQ1o+gmKQmCh1faCDEAdUSFHdo0KOT4NgdoA1ZddIka+s90hj+XvqBV1vpENSJMoVgPyu+oLuQB/iA/kChgRF8gHaEWskCi3iEHmClgRC2RKK6AyAktez1sxm6/URRZ9gU7EAeoEnBAL5ASoEPAI3edUHtgQUt3TZH12PfcBJLGTJFbnlZQAAAAASUVORK5CYII=') no-repeat 97% 50%;
    background-size: 12px 7px;
   }
   
   /* powered by */
   .sprinque-powered-img {
      height: 16px;
      margin-bottom: -4px;
      opacity: 0.3
   }
    .powered-by {
      margin-top: 10px;
      color: ${DISABLED_COLOR};
      display: flex;
      justify-content: space-between;
    }
    .powered-by div {
      color: ${DISABLED_COLOR};
    }
   /* buttons */
   button {
      color: ${LIGHT_COLOR};
      background: ${ACTIVE_ITEM_COLOR};
      border: 2px solid ${ACTIVE_ITEM_COLOR};
      border-radius: 4px;
      transition: .3s;
      font-weight: bold;
      font-size: 16px;
      padding: 8px 20px;
      margin: 10px 0;
      cursor: pointer;
   }
   button:disabled, button:disabled:hover {
      background: ${DISABLED_COLOR};
      border-color: ${DISABLED_COLOR};
   }
   button:hover {
      background: ${FORM_ELEM_COLOR};
   }
   button.secondary {
      border: 2px solid ${ACTIVE_ITEM_COLOR};
      background: transparent;
      color: ${ACTIVE_ITEM_COLOR};
   }
   button.secondary:hover {
    background: ${BORDER_COLOR};
   } 
   button.secondary.sp-arrow {
    border-color: ${ACTIVE_ITEM_COLOR};
   }
   button.secondary .sp-arrow {
    border-color: ${ACTIVE_ITEM_COLOR};
   }
   button.secondary .sp-arrow::before {
    background: ${ACTIVE_ITEM_COLOR};
   }
   /* common */
   .sprinque-text-right {
      text-align: right;
   }
   .cursour-pointer {
      cursor: pointer;
   }
   .justify-between {
      display: flex;
      justify-content: space-between;
   }
   /* validation */
   div[class^="${VALIDATION_ERROR_CLASS_PREFIX}"] {
      color: ${ERROR_COLOR};
      font-weight: bold;
   }
   .warning {
    background: rgb(255, 244, 229);
    padding: 10px;
    color: rgb(102, 60, 0);
    border-radius: 4px;
    border: 1px solid ${BORDER_COLOR};
   }
   
   .sp-arrow {
      border: solid white;
      border-width: 0 2px 2px 0;
      display: inline-block;
      padding: 4px;
    }
   .sp-arrow::before {
      content: "";
      width: 14px;
      height: 2px;
      background: white;
      position: absolute;
      rotate: 45deg;
      top: 3px;
      right: -3px;
   }
  
  .sp-right {
    margin-left: 10px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
  }
  
  .sp-left {
    margin-right: 10px;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
  }
</style>
`;