Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              a#codepen-link(href='https://www.codepen.io/seanfree' target='_blank')
.wrapper
  .cart-display
    .cart-icon
      input(type='checkbox' name='cart-toggle' class='cart-toggle' id='cart-toggle')
      label(for='cart-toggle' class='lbl-cart-toggle')
      .close-icon
    .cart-inner
      h2.title Cart
      ul.cart-items
        li.cart-item#item-1
          span.item-image
          ul.item-info
            li.item-name 
              a(href='http://www.no-mans-sky.com/' target='_blank') No Man's Sky (PC)
            li.item-year 2016
            li.item-desc A science-fiction game set in an infinite procedurally generated galaxy
          p.item-price $59.99
  form(class='form-checkout' action='?' method='post')
    h2.title Checkout
    h3.total $59.99
    .payment-select
      h3 Payment Type
      input(type='radio' name='payment-type' id='p-visa' class='r-type r-visa' value='visa' checked)
      label(for='p-visa' class='p-label lbl-visa')
      
      input(type='radio' name='payment-type' id='p-mcard' class='r-type r-mcard' value='mcard')
      label(for='p-mcard' class='p-label lbl-mcard')
      
      input(type='radio' name='payment-type' id='p-amex' class='r-type r-amex' value='amex')
      label(for='p-amex' class='p-label lbl-amex')
      
      input(type='radio' name='payment-type' id='p-disc' class='r-type r-disc')
      label(for='p-disc' class='p-label lbl-disc')
      
      .selector
    .card
      .card-type
      .card-info
        input(type='text' name='card-num' class='c-info-input c-in-num' placeholder='Card Number' maxlength='16')
        div
          input(type='text' name='name' class='c-info-input c-in-name' placeholder="Cardholder's Name")
          input(type='text' name='date-m' class='c-info-input c-in-date-m' placeholder='mm' maxlength='2')
          span.slash /
          input(type='text' name='date-m' class='c-info-input c-in-date-y' placeholder='yy' maxlength='2')
        input(type='text' name='cvv' class='c-info-input c-in-cvv' placeholder='cvv' maxlength='3')
      
    .buttons
      input(type='submit' name='btn-checkout' class='btn-checkout' value='Pay Now')
      span.or or
      button.btn-paypal
      
      
            
          
!
            
              $visa-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/visa.svg'
$mcard-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/mastercard.svg'
$amex-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/amex.svg'
$disc-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/discover.svg'
$cart-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/cart.svg'
$chip-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/chip.svg'
$paypal-icon: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/paypal.svg'
$nms-image: 'https://box1182.BlueHost.com/~seanale3/codepen/dailyui/002/nms.png'

#codepen-link
  position: absolute
  bottom: 30px
  right: 30px
  height: 40px
  width: 40px
  z-index: 10
  border-radius: 50%
  box-sizing: border-box
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/544318/logo.jpg')
  background-position: center center
  background-size: cover
  opacity: 0.5
  transition: all 0.25s
  &:hover
    opacity: 0.8
    box-shadow: 0 0 6px rgba(25,35,55,0.8)
body
  background: linear-gradient(45deg, #bbf, #fbb)
  background-attachment: fixed
  height: 100vh
  width: 100vw
.wrapper
  height: 650px
  left: calc(50% - 475px)
  width: 950px
  position: absolute
  top: 100px
  .title span
    font-weight: 400
  .cart-display, .form-checkout
    position: absolute
    transition: all 0.5s ease-out
  .cart-display
    background: #eee
    box-shadow: 0 1px 4px 1px #999
    height: 620px
    position: absolute
    top: 15px
    transform: translateX(205px)
    width: 440px
    .cart-inner
      h2
        background: #fff
        border-bottom: 1px solid #ccc
        color: #444
        font-family: 'Work Sans', sans-serif
        font-size: 2em
        font-weight: 300
        height: 60px
        line-height: 60px
        text-align: center
    .cart-items
      box-sizing: border-box
      .cart-item
        align-items: center
        -webkit-align-items: center
        border-bottom: 1px solid #ccc
        display: flex
        -webkit-display: flex
        font-family: 'Work Sans', sans-serif
        font-weight: 400
        padding: 10px
        *:not(.item-info)
          flex: 2
          -webkit-flex: 2
        .item-image
          background-position: center center
          background-repeat: no-repeat
          background-size: auto 100%
        .item-info
          flex: 3
          -webkit-flex: 3
          padding: 10px
          *
            margin-left: 10px
          .item-name
            font-size: 1.1em
            font-weight: 600
            a
              color: #444
              margin: 0
              padding: 0
              text-decoration: none
          .item-year
            font-size: 1.1em
            font-style: italic
          .item-desc
            padding: 5px
        .item-price
          font-size: 1.2em
          text-align: center
          text-decoration: underline
      #item-1
        .item-image
          background-image: url($nms-image)
          height: 140px
          width: 100px
  .cart-active
    transform: translateX(0px)
    + .form-checkout
      transform: translateX(450px)
  .form-checkout
    background: #eee
    box-shadow: 0 1px 4px 1px #999
    display: flex
    -webkit-display: flex
    flex-direction: column
    -webkit-direction: column
    height: 650px
    transform: translateX(230px)
    top: 0
    width: 500px
    z-index: 9
    .title
      background: #fff
      border-bottom: 1px solid #ccc
      color: #444
      font-family: 'Work Sans', sans-serif
      font-size: 2.5em
      font-weight: 300
      height: 70px
      line-height: 70px
      text-align: center
    .total
      color: #4caf50
      font-family: 'Work Sans', sans-serif
      font-size: 1.5em
      font-weight: 400
      padding: 15px
      text-align: center
.cart-icon
  background: #ec407a
  border-radius: 50%
  box-shadow: 0 1px 4px 1px #999
  height: 60px
  left: -30px
  position: absolute
  top: -10px
  width: 60px
  .cart-toggle
    display: none
    &:checked 
      + .lbl-cart-toggle
        opacity: 0
      ~ .close-icon
        &:before, &:after
          opacity: 1
        &:before
          transform: rotate(45deg)
        &:after
          transform: rotate(-45deg)
  .lbl-cart-toggle
    background: #ec407a url($cart-icon)
    background-position: 48% 60%
    background-repeat: no-repeat
    background-size: auto 55%
    border-radius: 50%
    display: block
    height: 60px
    position: absolute
    transition: all 0.5s ease-out
    width: 60px
    z-index: 4
    &:hover
      cursor: pointer
  .close-icon
    height: 60px
    width: 60px
    &:before, &:after
      background: #fff
      content: ''
      display: block
      height: 2px
      left: 20px
      opacity: 0
      position: absolute
      top: 29px
      transition: all 0.5s ease-out
      width: 20px
      z-index: 3
.payment-select
  align-items: flex-end
  background: #009688
  display: flex
  height: 125px
  justify-content: space-around
  h3
    background: #26a69a
    color: #fff
    font-family: 'Work Sans', sans-serif
    padding: 15px
    position: absolute
    top: 125px
    width: 470px
  .r-type
    display: none
    &:checked + .p-label
      background-color: #26a69a
  .p-label
    background-position: 50% 50%
    background-repeat: no-repeat
    background-size: auto 75%
    display: block
    height: 80px
    position: relative
    transition: all 0.25s ease-in-out
    width: 25%
    &:hover
      cursor: pointer
  .selector
    background: #eee
    height: 16px
    left: calc(12.5% - 8px)
    position: absolute
    top: 242px
    transform: rotate(45deg) translateX(0)
    transform-origin: center center
    transition: all 0.25s ease-in-out
    width: 16px
.lbl-visa
  background: url($visa-icon)
.lbl-mcard
  background: url($mcard-icon)
.lbl-amex
  background: url($amex-icon)
.lbl-disc
  background: url($disc-icon)
.r-visa
  &:checked ~ .selector
    left: calc(12.5% - 8px)
.r-mcard
  &:checked ~ .selector
    left: calc(37.5% - 8px)
.r-amex
  &:checked ~ .selector
    left: calc(62.5% - 8px)
.r-disc
  &:checked ~ .selector
    left: calc(87.5% - 8px)
.card
  background: #9c27b0
  border-radius: 10px
  height: 210px
  margin: 45px 80px
  position: absolute
  top: 250px
  width: 340px
  .card-type
    background-image: url($visa-icon)
    background-position: center center
    background-size: 100% auto
    background-repeat: no-repeat
    height: 40px
    margin: 20px 30px
    position: absolute
    right: 0
    transition: all 0.25s ease-in-out
    width: 60px
    z-index: 5
  &:before, &:after
    background: #ab47bc
    content: ''
    display: block
    height: 210px
    position: absolute
    width: 150px
    z-index: 3
  &:before
    background-image: url($chip-icon)
    background-position: 25% 30%
    background-repeat: no-repeat
    background-size: 30% auto
    border-radius: 10px
  &:after
    left: 62px
    transform: skew(15deg)
    z-index: 1
  .card-info
    align-items: flex-start
    display: flex
    flex-direction: column
    height: 110px
    justify-content: space-around
    padding-left: 30px
    position: absolute
    top: 85px
    width: 340px
    div
      position: relative
      z-index: 4
    .c-info-input
      background: transparent
      border-color: orange
      border-width: 0 0 1px 0
      color: #fff
      display: block
      font-family: 'Work Sans', sans-serif
      font-size: 1em
      outline: none
      text-align: center
      z-index: 4
    .c-in-num
      position: relative
      width: 280px
    .c-in-name
      display: inline-block
      margin-right: 15px
      width: 185px
    .c-in-date-m, .c-in-date-y
      display: inline-block
      width: 35px
    .slash
      color: #fff
      font-family: 'Work Sans', sans-serif
      font-size: 1.2em
      font-weight: 400
      left: 3px
      position: relative
      top: 2px
    .c-in-cvv
      left: 235px
      position: relative
      width: 45px
.buttons
  align-items: center
  display: flex
  justify-content: center
  height: 100px
  position: relative
  top: 280px
  .btn-checkout, .btn-paypal
    background: #2196f3
    border: none
    outline: none
  .btn-checkout
    color: #fff
    font-family: 'Work Sans', sans-serif
    font-size: 1.1em
    height: 60px
    width: 120px
    &:hover
      cursor: pointer
  .or
    display: inline-block
    font-family: 'Work Sans', sans-serif
    font-size: 1.25em
    font-style: italic
    margin: 0 20px
  .btn-paypal
    background: transparent url($paypal-icon)
    background-repeat: no-repeat
    background-size: 100% auto
    height: 30px
    width: 176px
    &:hover
      cursor: pointer
            
          
!
            
              cartIcon = $('.cart-icon')
cartDiv = $('.cart-display')
cardTypeDisplay = $('.card-type')[0]

cartIcon.on 'click', (e) ->
  if e.target.checked
  then cartDiv.addClass('cart-active')
  else cartDiv.removeClass('cart-active')
  return

$('.form-checkout').on 'submit', (e) ->
  e.preventDefault()
  return

$('.p-label').on 'click', (e) ->
  cardTypeDisplay.style.backgroundImage = window.getComputedStyle(e.target, false).backgroundImage
  return
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console