CodePen Embed - Credit Card Form - VueJs

Live

Live

Live

This Pen is owned by Muhammed Erdem on CodePen.

See more by @JavaScriptJunkie on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"YzzNGeR\",\"auto_save\":true},\"hashid\":\"YzzNGeR\",\"itemType\":\"pen\",\"resources\":[{\"url\":\"https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js\",\"order\":0,\"resource_type\":\"js\",\"par_content\":\"\"},{\"url\":\"https://unpkg.com/vue-the-mask@0.11.1/dist/vue-the-mask.js\",\"order\":1,\"resource_type\":\"js\",\"par_content\":\"\"}],\"tags\":[\"credit-card\",\"credit card form\",\"card form\",\"payment-form\",\"payment\"],\"id\":40690015,\"user_id\":716733,\"html\":\"  <div class=\\\"wrapper\\\" id=\\\"app\\\">\\n    <div class=\\\"card-form\\\">\\n      <div class=\\\"card-list\\\">\\n        <div class=\\\"card-item\\\" v-bind:class=\\\"{ '-active' : isCardFlipped }\\\">\\n          <div class=\\\"card-item__side -front\\\">\\n            <div class=\\\"card-item__focus\\\" v-bind:class=\\\"{'-active' : focusElementStyle }\\\" v-bind:style=\\\"focusElementStyle\\\" ref=\\\"focusElement\\\"></div>\\n            <div class=\\\"card-item__cover\\\">\\n              <img\\n              v-bind:src=\\\"'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'\\\" class=\\\"card-item__bg\\\">\\n            </div>\\n            \\n            <div class=\\\"card-item__wrapper\\\">\\n              <div class=\\\"card-item__top\\\">\\n                <img src=\\\"https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png\\\" class=\\\"card-item__chip\\\">\\n                <div class=\\\"card-item__type\\\">\\n                  <transition name=\\\"slide-fade-up\\\">\\n                    <img v-bind:src=\\\"'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'\\\" v-if=\\\"getCardType\\\" v-bind:key=\\\"getCardType\\\" alt=\\\"\\\" class=\\\"card-item__typeImg\\\">\\n                  </transition>\\n                </div>\\n              </div>\\n              <label for=\\\"cardNumber\\\" class=\\\"card-item__number\\\" ref=\\\"cardNumber\\\">\\n                <template v-if=\\\"getCardType === 'amex'\\\">\\n                 <span v-for=\\\"(n, $index) in amexCardMask\\\" :key=\\\"$index\\\">\\n                  <transition name=\\\"slide-fade-up\\\">\\n                    <div\\n                      class=\\\"card-item__numberItem\\\"\\n                      v-if=\\\"$index > 4 && $index < 14 && cardNumber.length > $index && n.trim() !== ''\\\"\\n                    >*</div>\\n                    <div class=\\\"card-item__numberItem\\\"\\n                      :class=\\\"{ '-active' : n.trim() === '' }\\\"\\n                      :key=\\\"$index\\\" v-else-if=\\\"cardNumber.length > $index\\\">\\n                      {{cardNumber[$index]}}\\n                    </div>\\n                    <div\\n                      class=\\\"card-item__numberItem\\\"\\n                      :class=\\\"{ '-active' : n.trim() === '' }\\\"\\n                      v-else\\n                      :key=\\\"$index + 1\\\"\\n                    >{{n}}</div>\\n                  </transition>\\n                </span>\\n                </template>\\n\\n                <template v-else>\\n                  <span v-for=\\\"(n, $index) in otherCardMask\\\" :key=\\\"$index\\\">\\n                    <transition name=\\\"slide-fade-up\\\">\\n                      <div\\n                        class=\\\"card-item__numberItem\\\"\\n                        v-if=\\\"$index > 4 && $index < 15 && cardNumber.length > $index && n.trim() !== ''\\\"\\n                      >*</div>\\n                      <div class=\\\"card-item__numberItem\\\"\\n                        :class=\\\"{ '-active' : n.trim() === '' }\\\"\\n                        :key=\\\"$index\\\" v-else-if=\\\"cardNumber.length > $index\\\">\\n                        {{cardNumber[$index]}}\\n                      </div>\\n                      <div\\n                        class=\\\"card-item__numberItem\\\"\\n                        :class=\\\"{ '-active' : n.trim() === '' }\\\"\\n                        v-else\\n                        :key=\\\"$index + 1\\\"\\n                      >{{n}}</div>\\n                    </transition>\\n                  </span>\\n                </template>\\n              </label>\\n              <div class=\\\"card-item__content\\\">\\n                <label for=\\\"cardName\\\" class=\\\"card-item__info\\\" ref=\\\"cardName\\\">\\n                  <div class=\\\"card-item__holder\\\">Card Holder</div>\\n                  <transition name=\\\"slide-fade-up\\\">\\n                    <div class=\\\"card-item__name\\\" v-if=\\\"cardName.length\\\" key=\\\"1\\\">\\n                      <transition-group name=\\\"slide-fade-right\\\">\\n                        <span class=\\\"card-item__nameItem\\\" v-for=\\\"(n, $index) in cardName.replace(/\\\\s\\\\s+/g, ' ')\\\" v-if=\\\"$index === $index\\\" v-bind:key=\\\"$index + 1\\\">{{n}}</span>\\n                      </transition-group>\\n                    </div>\\n                    <div class=\\\"card-item__name\\\" v-else key=\\\"2\\\">Full Name</div>\\n                  </transition>\\n                </label>\\n                <div class=\\\"card-item__date\\\" ref=\\\"cardDate\\\">\\n                  <label for=\\\"cardMonth\\\" class=\\\"card-item__dateTitle\\\">Expires</label>\\n                  <label for=\\\"cardMonth\\\" class=\\\"card-item__dateItem\\\">\\n                    <transition name=\\\"slide-fade-up\\\">\\n                      <span v-if=\\\"cardMonth\\\" v-bind:key=\\\"cardMonth\\\">{{cardMonth}}</span>\\n                      <span v-else key=\\\"2\\\">MM</span>\\n                    </transition>\\n                  </label>\\n                  /\\n                  <label for=\\\"cardYear\\\" class=\\\"card-item__dateItem\\\">\\n                    <transition name=\\\"slide-fade-up\\\">\\n                      <span v-if=\\\"cardYear\\\" v-bind:key=\\\"cardYear\\\">{{String(cardYear).slice(2,4)}}</span>\\n                      <span v-else key=\\\"2\\\">YY</span>\\n                    </transition>\\n                  </label>\\n                </div>\\n              </div>\\n            </div>\\n          </div>\\n          <div class=\\\"card-item__side -back\\\">\\n            <div class=\\\"card-item__cover\\\">\\n              <img\\n              v-bind:src=\\\"'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + currentCardBackground + '.jpeg'\\\" class=\\\"card-item__bg\\\">\\n            </div>\\n            <div class=\\\"card-item__band\\\"></div>\\n            <div class=\\\"card-item__cvv\\\">\\n                <div class=\\\"card-item__cvvTitle\\\">CVV</div>\\n                <div class=\\\"card-item__cvvBand\\\">\\n                  <span v-for=\\\"(n, $index) in cardCvv\\\" :key=\\\"$index\\\">\\n                    *\\n                  </span>\\n\\n              </div>\\n                <div class=\\\"card-item__type\\\">\\n                    <img v-bind:src=\\\"'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + getCardType + '.png'\\\" v-if=\\\"getCardType\\\" class=\\\"card-item__typeImg\\\">\\n                </div>\\n            </div>\\n          </div>\\n        </div>\\n      </div>\\n      <div class=\\\"card-form__inner\\\">\\n        <div class=\\\"card-input\\\">\\n          <label for=\\\"cardNumber\\\" class=\\\"card-input__label\\\">Card Number</label>\\n          <input type=\\\"text\\\" id=\\\"cardNumber\\\" class=\\\"card-input__input\\\" v-mask=\\\"generateCardNumberMask\\\" v-model=\\\"cardNumber\\\" v-on:focus=\\\"focusInput\\\" v-on:blur=\\\"blurInput\\\" data-ref=\\\"cardNumber\\\" autocomplete=\\\"off\\\">\\n        </div>\\n        <div class=\\\"card-input\\\">\\n          <label for=\\\"cardName\\\" class=\\\"card-input__label\\\">Card Holders</label>\\n          <input type=\\\"text\\\" id=\\\"cardName\\\" class=\\\"card-input__input\\\" v-model=\\\"cardName\\\" v-on:focus=\\\"focusInput\\\" v-on:blur=\\\"blurInput\\\" data-ref=\\\"cardName\\\" autocomplete=\\\"off\\\">\\n        </div>\\n        <div class=\\\"card-form__row\\\">\\n          <div class=\\\"card-form__col\\\">\\n            <div class=\\\"card-form__group\\\">\\n              <label for=\\\"cardMonth\\\" class=\\\"card-input__label\\\">Expiration Date</label>\\n              <select class=\\\"card-input__input -select\\\" id=\\\"cardMonth\\\" v-model=\\\"cardMonth\\\" v-on:focus=\\\"focusInput\\\" v-on:blur=\\\"blurInput\\\" data-ref=\\\"cardDate\\\">\\n                <option value=\\\"\\\" disabled selected>Month</option>\\n                <option v-bind:value=\\\"n < 10 ? '0' + n : n\\\" v-for=\\\"n in 12\\\" v-bind:disabled=\\\"n < minCardMonth\\\" v-bind:key=\\\"n\\\">\\n                    {{n < 10 ? '0' + n : n}}\\n                </option>\\n              </select>\\n              <select class=\\\"card-input__input -select\\\" id=\\\"cardYear\\\" v-model=\\\"cardYear\\\" v-on:focus=\\\"focusInput\\\" v-on:blur=\\\"blurInput\\\" data-ref=\\\"cardDate\\\">\\n                <option value=\\\"\\\" disabled selected>Year</option>\\n                <option v-bind:value=\\\"$index + minCardYear\\\" v-for=\\\"(n, $index) in 12\\\" v-bind:key=\\\"n\\\">\\n                    {{$index + minCardYear}}\\n                </option>\\n              </select>\\n            </div>\\n          </div>\\n          <div class=\\\"card-form__col -cvv\\\">\\n            <div class=\\\"card-input\\\">\\n              <label for=\\\"cardCvv\\\" class=\\\"card-input__label\\\">CVV</label>\\n              <input type=\\\"text\\\" class=\\\"card-input__input\\\" id=\\\"cardCvv\\\" v-mask=\\\"'####'\\\" maxlength=\\\"4\\\" v-model=\\\"cardCvv\\\" v-on:focus=\\\"flipCard(true)\\\" v-on:blur=\\\"flipCard(false)\\\" autocomplete=\\\"off\\\">\\n            </div>\\n          </div>\\n        </div>\\n\\n        <button class=\\\"card-form__button\\\">\\n          Submit\\n        </button>\\n      </div>\\n    </div>\\n    \\n    <a href=\\\"https://github.com/muhammederdem/credit-card-form\\\" target=\\\"_blank\\\" class=\\\"github-btn\\\">\\n      See on GitHub\\n    </a>\\n  </div>\",\"css\":\"@import url(\\\"https://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600,700|Source+Sans+Pro:400,600,700&display=swap\\\");\\n\\n\\nbody {\\n  background: #ddeefc;\\n  font-family: \\\"Source Sans Pro\\\", sans-serif;\\n  font-size: 16px;\\n}\\n* {\\n  box-sizing: border-box;\\n  &:focus {\\n    outline: none;\\n  }\\n}\\n.wrapper {\\n  min-height: 100vh;\\n  display: flex;\\n  padding: 50px 15px;\\n  @media screen and (max-width: 700px), (max-height: 500px) {\\n    flex-wrap: wrap;\\n    flex-direction: column;\\n  }\\n}\\n\\n.card-form {\\n  max-width: 570px;\\n  margin: auto;\\n  width: 100%;\\n\\n  @media screen and (max-width: 576px) {\\n    margin: 0 auto;\\n  }\\n\\n  &__inner {\\n    background: #fff;\\n    // box-shadow: 3px 13px 30px 0px rgba(21, 34, 67, 0.2);\\n    box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);\\n    border-radius: 10px;\\n    padding: 35px;\\n    padding-top: 180px;\\n\\n    @media screen and (max-width: 480px) {\\n      padding: 25px;\\n      padding-top: 165px;\\n    }\\n    @media screen and (max-width: 360px) {\\n      padding: 15px;\\n      padding-top: 165px;\\n    }\\n  }\\n\\n  &__row {\\n    display: flex;\\n    align-items: flex-start;\\n    @media screen and (max-width: 480px) {\\n      flex-wrap: wrap;\\n    }\\n  }\\n\\n  &__col {\\n    flex: auto;\\n    margin-right: 35px;\\n\\n    &:last-child {\\n      margin-right: 0;\\n    }\\n\\n    @media screen and (max-width: 480px) {\\n      margin-right: 0;\\n      flex: unset;\\n      width: 100%;\\n      margin-bottom: 20px;\\n\\n      &:last-child {\\n        margin-bottom: 0;\\n      }\\n    }\\n\\n    &.-cvv {\\n      max-width: 150px;\\n      @media screen and (max-width: 480px) {\\n        max-width: initial;\\n      }\\n    }\\n  }\\n\\n  &__group {\\n    display: flex;\\n    align-items: flex-start;\\n    flex-wrap: wrap;\\n\\n    .card-input__input {\\n      flex: 1;\\n      margin-right: 15px;\\n\\n      &:last-child {\\n        margin-right: 0;\\n      }\\n    }\\n  }\\n\\n  &__button {\\n    width: 100%;\\n    height: 55px;\\n    background: #2364d2;\\n    border: none;\\n    border-radius: 5px;\\n    font-size: 22px;\\n    font-weight: 500;\\n    font-family: \\\"Source Sans Pro\\\", sans-serif;\\n    box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);\\n    color: #fff;\\n    margin-top: 20px;\\n    cursor: pointer;\\n\\n    @media screen and (max-width: 480px) {\\n      margin-top: 10px;\\n    }\\n  }\\n}\\n\\n.card-item {\\n  max-width: 430px;\\n  height: 270px;\\n  margin-left: auto;\\n  margin-right: auto;\\n  position: relative;\\n  z-index: 2;\\n  width: 100%;\\n\\n  @media screen and (max-width: 480px) {\\n    max-width: 310px;\\n    height: 220px;\\n    width: 90%;\\n  }\\n\\n  @media screen and (max-width: 360px) {\\n    height: 180px;\\n  }\\n\\n  &.-active {\\n    .card-item__side {\\n      &.-front {\\n        transform: perspective(1000px) rotateY(180deg) rotateX(0deg)\\n          rotateZ(0deg);\\n      }\\n      &.-back {\\n        transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);\\n        // box-shadow: 0 20px 50px 0 rgba(81, 88, 206, 0.65);\\n      }\\n    }\\n  }\\n\\n  &__focus {\\n    position: absolute;\\n    z-index: 3;\\n    border-radius: 5px;\\n    left: 0;\\n    top: 0;\\n    width: 100%;\\n    height: 100%;\\n    transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);\\n    opacity: 0;\\n    pointer-events: none;\\n    overflow: hidden;\\n    border: 2px solid rgba(255, 255, 255, 0.65);\\n\\n    &:after {\\n      content: \\\"\\\";\\n      position: absolute;\\n      top: 0;\\n      left: 0;\\n      width: 100%;\\n      background: rgb(8, 20, 47);\\n      height: 100%;\\n      border-radius: 5px;\\n      filter: blur(25px);\\n      opacity: 0.5;\\n    }\\n\\n    &.-active {\\n      opacity: 1;\\n    }\\n  }\\n\\n  &__side {\\n    border-radius: 15px;\\n    overflow: hidden;\\n    // box-shadow: 3px 13px 30px 0px rgba(11, 19, 41, 0.5);\\n    box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);\\n    transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);\\n    transform-style: preserve-3d;\\n    transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);\\n    backface-visibility: hidden;\\n    height: 100%;\\n\\n    &.-back {\\n      position: absolute;\\n      top: 0;\\n      left: 0;\\n      width: 100%;\\n      transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);\\n      z-index: 2;\\n      padding: 0;\\n      // background-color: #2364d2;\\n      // background-image: linear-gradient(\\n      //   43deg,\\n      //   #4158d0 0%,\\n      //   #8555c7 46%,\\n      //   #2364d2 100%\\n      // );\\n      height: 100%;\\n\\n      .card-item__cover {\\n        transform: rotateY(-180deg)\\n      }\\n    }\\n  }\\n  &__bg {\\n    max-width: 100%;\\n    display: block;\\n    max-height: 100%;\\n    height: 100%;\\n    width: 100%;\\n    object-fit: cover;\\n  }\\n  &__cover {\\n    height: 100%;\\n    background-color: #1c1d27;\\n    position: absolute;\\n    height: 100%;\\n    background-color: #1c1d27;\\n    left: 0;\\n    top: 0;\\n    width: 100%;\\n    border-radius: 15px;\\n    overflow: hidden;\\n    &:after {\\n      content: \\\"\\\";\\n      position: absolute;\\n      left: 0;\\n      top: 0;\\n      width: 100%;\\n      height: 100%;\\n      background: rgba(6, 2, 29, 0.45);\\n    }\\n  }\\n\\n  &__top {\\n    display: flex;\\n    align-items: flex-start;\\n    justify-content: space-between;\\n    margin-bottom: 40px;\\n    padding: 0 10px;\\n\\n    @media screen and (max-width: 480px) {\\n      margin-bottom: 25px;\\n    }\\n    @media screen and (max-width: 360px) {\\n      margin-bottom: 15px;\\n    }\\n  }\\n\\n  &__chip {\\n    width: 60px;\\n    @media screen and (max-width: 480px) {\\n      width: 50px;\\n    }\\n    @media screen and (max-width: 360px) {\\n      width: 40px;\\n    }\\n  }\\n\\n  &__type {\\n    height: 45px;\\n    position: relative;\\n    display: flex;\\n    justify-content: flex-end;\\n    max-width: 100px;\\n    margin-left: auto;\\n    width: 100%;\\n\\n    @media screen and (max-width: 480px) {\\n      height: 40px;\\n      max-width: 90px;\\n    }\\n    @media screen and (max-width: 360px) {\\n      height: 30px;\\n    }\\n  }\\n\\n  &__typeImg {\\n    max-width: 100%;\\n    object-fit: contain;\\n    max-height: 100%;\\n    object-position: top right;\\n  }\\n\\n  &__info {\\n    color: #fff;\\n    width: 100%;\\n    max-width: calc(100% - 85px);\\n    padding: 10px 15px;\\n    font-weight: 500;\\n    display: block;\\n\\n    cursor: pointer;\\n\\n    @media screen and (max-width: 480px) {\\n      padding: 10px;\\n    }\\n  }\\n\\n  &__holder {\\n    opacity: 0.7;\\n    font-size: 13px;\\n    margin-bottom: 6px;\\n    @media screen and (max-width: 480px) {\\n      font-size: 12px;\\n      margin-bottom: 5px;\\n    }\\n  }\\n\\n  &__wrapper {\\n    font-family: \\\"Source Code Pro\\\", monospace;\\n    padding: 25px 15px;\\n    position: relative;\\n    z-index: 4;\\n    height: 100%;\\n    text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);\\n    user-select: none;\\n    @media screen and (max-width: 480px) {\\n      padding: 20px 10px;\\n    }\\n  }\\n\\n  &__name {\\n    font-size: 18px;\\n    line-height: 1;\\n    white-space: nowrap;\\n    max-width: 100%;\\n    overflow: hidden;\\n    text-overflow: ellipsis;\\n    text-transform: uppercase;\\n    @media screen and (max-width: 480px) {\\n      font-size: 16px;\\n    }\\n  }\\n  &__nameItem {\\n    display: inline-block;\\n    min-width: 8px;\\n    position: relative;\\n  }\\n\\n  &__number {\\n    font-weight: 500;\\n    line-height: 1;\\n    color: #fff;\\n    font-size: 27px;\\n    margin-bottom: 35px;\\n    display: inline-block;\\n    padding: 10px 15px;\\n    cursor: pointer;\\n\\n    @media screen and (max-width: 480px) {\\n      font-size: 21px;\\n      margin-bottom: 15px;\\n      padding: 10px 10px;\\n    }\\n\\n    @media screen and (max-width: 360px) {\\n      font-size: 19px;\\n      margin-bottom: 10px;\\n      padding: 10px 10px;\\n    }\\n  }\\n\\n  &__numberItem {\\n    width: 16px;\\n    display: inline-block;\\n    &.-active {\\n      width: 30px;\\n    }\\n\\n    @media screen and (max-width: 480px) {\\n      width: 13px;\\n\\n      &.-active {\\n        width: 16px;\\n      }\\n    }\\n\\n    @media screen and (max-width: 360px) {\\n      width: 12px;\\n\\n      &.-active {\\n        width: 8px;\\n      }\\n    }\\n  }\\n\\n  &__content {\\n    color: #fff;\\n    display: flex;\\n    align-items: flex-start;\\n  }\\n\\n  &__date {\\n    flex-wrap: wrap;\\n    font-size: 18px;\\n    margin-left: auto;\\n    padding: 10px;\\n    display: inline-flex;\\n    width: 80px;\\n    white-space: nowrap;\\n    flex-shrink: 0;\\n    cursor: pointer;\\n\\n    @media screen and (max-width: 480px) {\\n      font-size: 16px;\\n    }\\n  }\\n\\n  &__dateItem {\\n    position: relative;\\n    span {\\n      width: 22px;\\n      display: inline-block;\\n    }\\n  }\\n\\n  &__dateTitle {\\n    opacity: 0.7;\\n    font-size: 13px;\\n    padding-bottom: 6px;\\n    width: 100%;\\n\\n    @media screen and (max-width: 480px) {\\n      font-size: 12px;\\n      padding-bottom: 5px;\\n    }\\n  }\\n  &__band {\\n    background: rgba(0, 0, 19, 0.8);\\n    width: 100%;\\n    height: 50px;\\n    margin-top: 30px;\\n    position: relative;\\n    z-index: 2;\\n    @media screen and (max-width: 480px) {\\n      margin-top: 20px;\\n    }\\n    @media screen and (max-width: 360px) {\\n      height: 40px;\\n      margin-top: 10px;\\n    }\\n  }\\n\\n  &__cvv {\\n    text-align: right;\\n    position: relative;\\n    z-index: 2;\\n    padding: 15px;\\n    .card-item__type {\\n      opacity: 0.7;\\n    }\\n\\n    @media screen and (max-width: 360px) {\\n      padding: 10px 15px;\\n    }\\n  }\\n  &__cvvTitle {\\n    padding-right: 10px;\\n    font-size: 15px;\\n    font-weight: 500;\\n    color: #fff;\\n    margin-bottom: 5px;\\n  }\\n  &__cvvBand {\\n    height: 45px;\\n    background: #fff;\\n    margin-bottom: 30px;\\n    text-align: right;\\n    display: flex;\\n    align-items: center;\\n    justify-content: flex-end;\\n    padding-right: 10px;\\n    color: #1a3b5d;\\n    font-size: 18px;\\n    border-radius: 4px;\\n    box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35);\\n\\n    @media screen and (max-width: 480px) {\\n      height: 40px;\\n      margin-bottom: 20px;\\n    }\\n\\n    @media screen and (max-width: 360px) {\\n      margin-bottom: 15px;\\n    }\\n  }\\n}\\n\\n.card-list {\\n  margin-bottom: -130px;\\n\\n  @media screen and (max-width: 480px) {\\n    margin-bottom: -120px;\\n  }\\n}\\n\\n.card-input {\\n  margin-bottom: 20px;\\n  &__label {\\n    font-size: 14px;\\n    margin-bottom: 5px;\\n    font-weight: 500;\\n    color: #1a3b5d;\\n    width: 100%;\\n    display: block;\\n    user-select: none;\\n  }\\n  &__input {\\n    width: 100%;\\n    height: 50px;\\n    border-radius: 5px;\\n    box-shadow: none;\\n    border: 1px solid #ced6e0;\\n    transition: all 0.3s ease-in-out;\\n    font-size: 18px;\\n    padding: 5px 15px;\\n    background: none;\\n    color: #1a3b5d;\\n    font-family: \\\"Source Sans Pro\\\", sans-serif;\\n\\n    &:hover,\\n    &:focus {\\n      border-color: #3d9cff;\\n    }\\n\\n    &:focus {\\n      box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);\\n    }\\n    &.-select {\\n      -webkit-appearance: none;\\n      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC');\\n      background-size: 12px;\\n      background-position: 90% center;\\n      background-repeat: no-repeat;\\n      padding-right: 30px;\\n    }\\n  }\\n}\\n\\n.slide-fade-up-enter-active {\\n  transition: all 0.25s ease-in-out;\\n  transition-delay: 0.1s;\\n  position: relative;\\n}\\n.slide-fade-up-leave-active {\\n  transition: all 0.25s ease-in-out;\\n  position: absolute;\\n}\\n.slide-fade-up-enter {\\n  opacity: 0;\\n  transform: translateY(15px);\\n  pointer-events: none;\\n}\\n.slide-fade-up-leave-to {\\n  opacity: 0;\\n  transform: translateY(-15px);\\n  pointer-events: none;\\n}\\n\\n.slide-fade-right-enter-active {\\n  transition: all 0.25s ease-in-out;\\n  transition-delay: 0.1s;\\n  position: relative;\\n}\\n.slide-fade-right-leave-active {\\n  transition: all 0.25s ease-in-out;\\n  position: absolute;\\n}\\n.slide-fade-right-enter {\\n  opacity: 0;\\n  transform: translateX(10px) rotate(45deg);\\n  pointer-events: none;\\n}\\n.slide-fade-right-leave-to {\\n  opacity: 0;\\n  transform: translateX(-10px) rotate(45deg);\\n  pointer-events: none;\\n}\\n\\n\\n\\n.github-btn {\\n  position: absolute;\\n  right: 40px;\\n  bottom: 50px;\\n  text-decoration: none;\\n  padding: 15px 25px;\\n  border-radius: 4px;\\n  box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);\\n  background: #24292e;\\n  color: #fff;\\n  font-weight: bold;\\n  letter-spacing: 1px;\\n  font-size: 16px;\\n  text-align: center;\\n  transition: all .3s ease-in-out;\\n\\n  @media screen and (min-width: 500px) {\\n    &:hover {\\n      transform: scale(1.1);\\n      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);\\n    }\\n  }\\n\\n  @media screen and (max-width: 700px) {\\n    position: relative;\\n    bottom: auto;\\n    right: auto;\\n    margin-top: 20px;\\n\\n    &:active {\\n      transform: scale(1.1);\\n      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);\\n    }\\n  }\\n}\",\"js\":\"/*\\nSee on github: https://github.com/muhammederdem/credit-card-form\\n*/\\n\\nnew Vue({\\n  el: \\\"#app\\\",\\n  data() {\\n    return {\\n      currentCardBackground: Math.floor(Math.random()* 25 + 1), // just for fun :D\\n      cardName: \\\"\\\",\\n      cardNumber: \\\"\\\",\\n      cardMonth: \\\"\\\",\\n      cardYear: \\\"\\\",\\n      cardCvv: \\\"\\\",\\n      minCardYear: new Date().getFullYear(),\\n      amexCardMask: \\\"#### ###### #####\\\",\\n      otherCardMask: \\\"#### #### #### ####\\\",\\n      cardNumberTemp: \\\"\\\",\\n      isCardFlipped: false,\\n      focusElementStyle: null,\\n      isInputFocused: false\\n    };\\n  },\\n  mounted() {\\n    this.cardNumberTemp = this.otherCardMask;\\n    document.getElementById(\\\"cardNumber\\\").focus();\\n  },\\n  computed: {\\n    getCardType () {\\n      let number = this.cardNumber;\\n      let re = new RegExp(\\\"^4\\\");\\n      if (number.match(re) != null) return \\\"visa\\\";\\n\\n      re = new RegExp(\\\"^(34|37)\\\");\\n      if (number.match(re) != null) return \\\"amex\\\";\\n\\n      re = new RegExp(\\\"^5[1-5]\\\");\\n      if (number.match(re) != null) return \\\"mastercard\\\";\\n\\n      re = new RegExp(\\\"^6011\\\");\\n      if (number.match(re) != null) return \\\"discover\\\";\\n      \\n      re = new RegExp('^9792')\\n      if (number.match(re) != null) return 'troy'\\n\\n      return \\\"visa\\\"; // default type\\n    },\\n\\t\\tgenerateCardNumberMask () {\\n\\t\\t\\treturn this.getCardType === \\\"amex\\\" ? this.amexCardMask : this.otherCardMask;\\n    },\\n    minCardMonth () {\\n      if (this.cardYear === this.minCardYear) return new Date().getMonth() + 1;\\n      return 1;\\n    }\\n  },\\n  watch: {\\n    cardYear () {\\n      if (this.cardMonth < this.minCardMonth) {\\n        this.cardMonth = \\\"\\\";\\n      }\\n    }\\n  },\\n  methods: {\\n    flipCard (status) {\\n      this.isCardFlipped = status;\\n    },\\n    focusInput (e) {\\n      this.isInputFocused = true;\\n      let targetRef = e.target.dataset.ref;\\n      let target = this.$refs[targetRef];\\n      this.focusElementStyle = {\\n        width: `${target.offsetWidth}px`,\\n        height: `${target.offsetHeight}px`,\\n        transform: `translateX(${target.offsetLeft}px) translateY(${target.offsetTop}px)`\\n      }\\n    },\\n    blurInput() {\\n      let vm = this;\\n      setTimeout(() => {\\n        if (!vm.isInputFocused) {\\n          vm.focusElementStyle = null;\\n        }\\n      }, 300);\\n      vm.isInputFocused = false;\\n    }\\n  }\\n});\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"scss\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"reset\",\"js_library\":null,\"created_at\":\"2019-10-21T17:02:48.000Z\",\"updated_at\":\"2019-12-30T18:25:14.000Z\",\"title\":\"Credit Card Form - VueJs\",\"description\":\"A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with vuejs and also fully responsive.\\n\\nSee on Github: https://github.com/muhammederdem/credit-card-form\",\"slug_hash\":\"YzzNGeR\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"016def45-6ec0-79ae-88af-77e1231339fb\",\"is_new_editor_pen\":false,\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-98018b12d50424943c3d.js"}