binking

by versusbassz

HTML

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>BinKing JS Plugin Demo</title>
  <style>
    body {
      margin: 10px;
      padding: 0;
      font-size: 16px;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    * {
      box-sizing: border-box;
      outline: none;
    }

    .binking {
      font-size: 16px;
    }

    .binking__form.binking__hide {
      display: none;
    }

    .binking__success.binking__hide {
      display: none;
    }

    .binking__title {
      font-size: 1.4em;
      margin: 0;
      margin-bottom: 0.4em;
    }

    .binking__panels {
      width: 500px;
      height: 260px;
      position: relative;
    }

    .binking__panel {
      position: absolute;
      width: 370px;
      height: 230px;
      border-radius: 15px;
    }

    .binking__front-panel {
      background: #eeeeee;
      color: #000;
      top: 0;
      left: 0;
      z-index: 100;
      transition: background-color 150ms ease;
    }

    .binking__form-bank-logo {
      position: absolute;
      top: 0;
      left: 0;
      padding: 20px 27px 0;
      width: 100%;
      height: 68px;
      object-fit: contain;
      object-position: 0 0;
      transition: opacity 150ms ease, transform 150ms ease;
    }

    .binking__form-bank-logo.binking__hide {
      opacity: 0;
      transform: scale(0.8);
    }

    .binking__form-brand-logo {
      position: absolute;
      bottom: 26px;
      right: 27px;
      text-align: right;
      height: 36px;
      transition: opacity 150ms ease, transform 150ms ease;
    }

    .binking__form-brand-logo.binking__hide {
      opacity: 0;
      transform: scale(0.8)
    }

    .binking__front-fields {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 26px;
    }

    .binking__number-field {
      width: 100%;
      margin-bottom: 15px;
    }

    .binking__date-label {
      margin-bottom: 6px;
      transition: color 150ms ease;
    }

   ...