crowdstart-checkout/css/checkbox.styl

One Click Checkout for Crowdstart

/* Checkbox */
.crowdstart-checkbox-control input[type="checkbox"]
  display: none

.crowdstart-checkbox-control input[type="checkbox"] + label .crowdstart-checkbox
  display: inline-block
  width: 1em
  height: 1em
  position: relative
  top: .2em
  margin-right: .3em

.crowdstart-checkbox-control input[type="checkbox"] + label
  user-select: none

.crowdstart-checkbox
  cursor: pointer

.crowdstart-checkbox-parts
  opacity: 0

.crowdstart-checkbox-control input[type="checkbox"]:checked + label .crowdstart-checkbox-parts
  opacity: 1

  animation: bounce 1000ms linear both

@keyframes bounce
  0% { transform: matrix3d(0.25, 0, 0, 0, 0, 0.25, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  3.4% { transform: matrix3d(0.329, 0, 0, 0, 0, 0.352, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  4.7% { transform: matrix3d(0.362, 0, 0, 0, 0, 0.4, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  6.81% { transform: matrix3d(0.415, 0, 0, 0, 0, 0.473, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  9.41% { transform: matrix3d(0.471, 0, 0, 0, 0, 0.542, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  10.21% { transform: matrix3d(0.485, 0, 0, 0, 0, 0.557, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  13.61% { transform: matrix3d(0.531, 0, 0, 0, 0, 0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  14.11% { transform: matrix3d(0.535, 0, 0, 0, 0, 0.583, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  17.52% { transform: matrix3d(0.552, 0, 0, 0, 0, 0.56, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  18.72% { transform: matrix3d(0.553, 0, 0, 0, 0, 0.547, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  21.32% { transform: matrix3d(0.549, 0, 0, 0, 0, 0.517, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  24.32% { transform: matrix3d(0.538, 0, 0, 0, 0, 0.49, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  25.23% { transform: matrix3d(0.533, 0, 0, 0, 0, 0.484, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  29.03% { transform: matrix3d(0.516, 0, 0, 0, 0, 0.474, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  29.93% { transform: matrix3d(0.512, 0, 0, 0, 0, 0.475, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  35.54% { transform: matrix3d(0.495, 0, 0, 0, 0, 0.491, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  36.74% { transform: matrix3d(0.493, 0, 0, 0, 0, 0.495, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  41.04% { transform: matrix3d(0.49, 0, 0, 0, 0, 0.506, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  44.44% { transform: matrix3d(0.491, 0, 0, 0, 0, 0.508, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  52.15% { transform: matrix3d(0.498, 0, 0, 0, 0, 0.502, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  59.86% { transform: matrix3d(0.502, 0, 0, 0, 0, 0.498, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  63.26% { transform: matrix3d(0.502, 0, 0, 0, 0, 0.498, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  75.28% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.501, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  85.49% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  90.69% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }
  100% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) }

.crowdstart-checkbox-short-part
  width: 11px
  height: 4px
  transform: rotate(60deg)
  position: relative
  top: 8px
  left: -6px

.crowdstart-checkbox-long-part
  width: 22px
  height: 4px
  transform: rotate(130deg)
  position: relative
  top: 2px
  left: -2px