15. The Gift of CSS (Tap!)

mixin flaps(taped)

  .package__flap.package__flap--top

    if taped

      .package__tape.package__tape--top

  .package__flap.package__flap--bottom

    if taped

      .package__tape.package__tape--bottom

​

mixin side(taped = false)

  .package__side(class=`package__side--${attributes.class || 'side'}`)

    +flaps(taped)

    if block

      block

​

input#package(type="checkbox")

label.close(for="package") Close /

label.open(for="package") Open

​

.scene

  .gift

    .gift__gift

      svg(viewBox="0 0 362.6 388.5" role="img")

:root

  --height 20

  --width 20

  --depth 20

  --no-of-steps 12

  --primary-hue 260

  --secondary-hue 45

  --bg 'hsl(%s, 30%, 90%)' % var(--primary-hue)

  --primary 'hsl(%s, 80%, 50%)' % var(--primary-hue)

  --secondary 'hsl(%s, 100%, 50%)' % var(--secondary-hue)

  --ribbon-bg linear-gradient(90deg, var(--secondary) 0 10%, transparent 10% 25%, var(--secondary) 25% 75%, transparent 75% 90%, var(--secondary) 90%)

  --ribbon-bg-rotated linear-gradient(0deg, var(--secondary) 0 10%, transparent 10% 25%, var(--secondary) 25% 75%, transparent 75% 90%, var(--secondary) 90%)

  --ribbon-width calc(var(--width) * 0.2vmin)

*

*:after

*:before

  box-sizing border-box

  transform-style preserve-3d

​