{"componentChunkName":"component---src-templates-post-js","path":"/pensieve/checkout-form","result":{"data":{"markdownRemark":{"html":"

Codepen Demo

\n

HTML

\n
<form action=\"\">\n  <div class=\"module email\">\n    <label>\n      <span class=\"number\">1</span>\n      <span class=\"text\">Email</span>\n    </label>\n    <div class=\"module__content\">\n      <input type=\"text\" placeholder=\"email\">\n    </div>\n  </div>\n\n  <div class=\"module shipping\">\n    <label>\n      <span class=\"number\">2</span>\n      <span class=\"text\">Shipping</span>\n    </label>\n    <div class=\"module__content\">\n      <div class=\"row\">\n        <input type=\"text\" placeholder=\"First\">\n        <input type=\"text\" placeholder=\"Last\">\n      </div>\n      <div class=\"row\">\n        <input type=\"text\" placeholder=\"Address Line 1\">\n      </div>\n      <div class=\"row\">\n        <input type=\"text\" placeholder=\"Address Line 2\">\n      </div>\n      <div class=\"row\">\n        <input type=\"text\" placeholder=\"City\">\n        <input type=\"text\" placeholder=\"State\">\n        <input type=\"text\" placeholder=\"Zip\">\n      </div>\n      <div class=\"row\">\n        <input type=\"text\" placeholder=\"Phone Number\">\n      </div>\n    </div>\n  </div>\n</form>
\n

CSS Variables

\n
body {\n  font-family: sans-serif;\n}\n\n$numSize: 30px;\n$numBorder: 2px;\n\nform {\n  .module {\n    display: flex;\n    flex-direction: column;\n    max-width: 400px;\n    padding: 20px;\n    background: #eee;\n    margin-bottom: 20px;\n    transition: all 0.25s ease;\n    &.active {\n      background: lightblue;\n      padding: 30px 20px;\n      input {\n        height: 30px;\n        border-color: grey;\n      }\n    }\n    &__content {\n      margin-left: calc(#{$numSize} + #{$numBorder} + #{$numBorder} + 10px);\n    }\n    label {\n      display: flex;\n      align-items: center;\n      margin-bottom: 10px;\n      font-weight: 700;\n      .number {\n        width: $numSize;\n        height: $numSize;\n        border: $numBorder solid black;\n        border-radius: 100%;\n        display: inline-block;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin-right: 10px;\n        font-size: 16px;\n      }\n    }\n    input {\n      // width: fit-content;\n      width: 100%;\n      outline: none;\n      border: none;\n      background: transparent;\n      margin-bottom: 10px;\n      font-size: 16px;\n      transition: all 0.25s ease;\n      border-bottom: 1px solid #ccc;\n      &:hover {\n        border-color: grey;\n      }\n    }\n  }\n}\n\n.row {\n  display: flex;\n  & > * {\n    margin-right: 10px;\n  }\n}\n
\n

JavaScript

\n
const inputs = document.querySelectorAll(\".module input\");\n\ninputs.forEach(input => {\n  input.addEventListener(\"focusin\", function() {\n    this.closest(\".module\").classList.add(\"active\");\n  });\n  input.addEventListener(\"focusout\", function() {\n    this.closest(\".module\").classList.remove(\"active\");\n  });\n});\n
","frontmatter":{"title":"Checkout Form","description":"Checkout Form with focus on the fields while filling out the form","date":"2021-04-21T00:00:00.000Z","slug":"/pensieve/checkout-form","tags":["Theming","Forms"]}}},"pageContext":{}},"staticQueryHashes":["1994492073","2681795072","3391063840","604461682"]}