Long-shadow checkboxes

index.html

#vcent
  h1 What'll it be today?
  .buttons
    input type="checkbox" name="flat" id="sex"
    label for="sex" Sex
    input type="checkbox" name="flat" id="drugs" class="s34"
    label for="drugs" Drugs
    input type="checkbox" name="flat" id="rock" class="s34"
    label for="rock" Rock & Roll

index.slim

#vcent
  h1 What'll it be today?
  .buttons
    input type="checkbox" name="flat" id="sex"
    label for="sex" Sex
    input type="checkbox" name="flat" id="drugs" class="s34"
    label for="drugs" Drugs
    input type="checkbox" name="flat" id="rock" class="s34"
    label for="rock" Rock & Roll

Long-shadow checkboxes.markdown

Long-shadow checkboxes

An attempt to give flat buttons some depth. Let me know what you think! (Part of a series)

A Pen by Riley Shaw on CodePen.

License.

Long-shadow-checkboxes.markdown

Long-shadow checkboxes

An attempt to give flat buttons some depth. Let me know what you think! (Part of a series)

A Pen by Riley Shaw on CodePen.

License.

script.coffee

$('input').change () ->
  $($(this).nextAll('input').get(0)).toggleClass('s34')

script.js

$('input').change () ->
  $($(this).nextAll('input').get(0)).toggleClass('s34')

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import compass

$colors: #2980b9 #8e44ad #7f8c8d #c0392b #16a085 #f39c12

$h1height: 108px
$buttonsize: 230px
$pressdepth: 12px
$bg: nth($colors, random(length($colors)) + 1)
// Override the random color for now
$bg: #8e44ad

=shadowfy($num, $c)
  $shadow: 1px 1px #{$c}
  @for $i from 2px through $num*1px
    $shadow: append($shadow, $i ($i) $c, comma)
  box-shadow: $shadow

*
  box-sizing: border-box

html, body
  height: 100%

body
  margin: 0
  padding: 0
  background: $bg

h1
  height: $h1height
  font: bold 36px/#{$h1height} sans-serif
  text-transform: uppercase
  color: scale-lightness($bg, -35%)
  
#vcent
  $vcentheight: $h1height * 2 + $buttonsize / 2
  $vcentwidth: $buttonsize * 3 + 2 * $buttonsize * 2/5
  position: absolute
  top: 50%
  left: 50%
  height: $vcentheight
  width: $vcentwidth
  margin: -$vcentheight/2 0 0 #{-$vcentwidth/2}
  text-align: center
    
input
  position: absolute
  left: -99999px
  
label
  cursor: pointer
  position: absolute
  height: $buttonsize / 2
  width: $buttonsize + $pressdepth
  border-left: $pressdepth solid scale-lightness($bg, 20%)
  border-right: 0 solid $bg
  font: bold 24px / #{$buttonsize / 2} sans-serif
  text-align: center
  text-transform: uppercase
  color: scale-lightness($bg, -25%)
  background: scale-lightness($bg, 10%)
  @for $i from 0 through 2
    &:nth-child(#{2 * ($i + 1)})
      left: $i * $buttonsize*7/5
  
  +transition(background 2s, width 0.5s 0.5s, border-left 0.5s 0.5s, border-right 0.5s, box-shadow 0s 0.5s)
  +shadowfy(800, scale-lightness($bg, -5%))
        
  \input:checked + &
    width: $buttonsize - $pressdepth
    border-left-width: 0
    border-left-color: $bg
    border-right-width: $pressdepth
    border-right-color: scale-lightness($bg, 10%)
    color: scale-lightness($bg, -45%)
    background: scale-lightness($bg, -10%)
    +box-shadow(none)
      
    +transition(color 2s, background 2s, width 0.5s, border-left 0.5s, border-right 0.5s 0.5s, box-shadow 0s 0.5s)
      
    &:before
      background: scale-lightness(#27ae60, 35%)
  
  &:before
    content: ''
    position: absolute
    top: 12px
    right: 12px
    height: 12px
    width: 12px
    +border-radius(6px)
    background: scale-lightness($bg, -15%)
    +transition(background 0.5s)
      
  &:after
    content: ''
    position: absolute
    bottom: 0px
    left: 0px
    height: 0
    width: 0
    border-bottom: 10px solid transparent
    border-right: 10px solid transparent
    +transition(border 0.5s)
      
\input.s34:checked+label:after
  border-right-width: 34px
  border-bottom-width: 34px
  border-bottom-color: scale-lightness($bg, -25%)
  +transition(border 0.5s 0.5s)
  

style.sass

@import "compass"
$colors: #2980b9 #8e44ad #7f8c8d #c0392b #16a085 #f39c12

$h1height: 108px
$buttonsize: 230px
$pressdepth: 12px
$bg: nth($colors, random(length($colors)) + 1)
// Override the random color for now
$bg: #8e44ad

=shadowfy($num, $c)
  $shadow: 1px 1px #{$c}
  @for $i from 2px through $num*1px
    $shadow: append($shadow, $i ($i) $c, comma)
  box-shadow: $shadow

*
  box-sizing: border-box

html, body
  height: 100%

body
  margin: 0
  padding: 0
  background: $bg

h1
  height: $h1height
  font: bold 36px/#{$h1height} sans-serif
  text-transform: uppercase
  color: scale-lightness($bg, -35%)
  
#vcent
  $vcentheight: $h1height * 2 + $buttonsize / 2
  $vcentwidth: $buttonsize * 3 + 2 * $buttonsize * 2/5
  position: absolute
  top: 50%
  left: 50%
  height: $vcentheight
  width: $vcentwidth
  margin: -$vcentheight/2 0 0 #{-$vcentwidth/2}
  text-align: center
    
input
  position: absolute
  left: -99999px
  
label
  cursor: pointer
  position: absolute
  height: $buttonsize / 2
  width: $buttonsize + $pressdepth
  border-left: $pressdepth solid scale-lightness($bg, 20%)
  border-right: 0 solid $bg
  font: bold 24px / #{$buttonsize / 2} sans-serif
  text-align: center
  text-transform: uppercase
  color: scale-lightness($bg, -25%)
  background: scale-lightness($bg, 10%)
  @for $i from 0 through 2
    &:nth-child(#{2 * ($i + 1)})
      left: $i * $buttonsize*7/5
  
  +transition(background 2s, width .5s .5s, border-left .5s .5s, border-right .5s, box-shadow 0 .5s)
  +shadowfy(800, scale-lightness($bg, -5%))
        
  \input:checked + &
    width: $buttonsize - $pressdepth
    border-left-width: 0
    border-left-color: $bg
    border-right-width: $pressdepth
    border-right-color: scale-lightness($bg, 10%)
    color: scale-lightness($bg, -45%)
    background: scale-lightness($bg, -10%)
    +box-shadow(none)
      
    +transition(color 2s, background 2s, width .5s, border-left .5s, border-right .5s .5s, box-shadow 0 .5s)
      
    &:before
      background: scale-lightness(#27ae60, 35%)
  
  &:before
    content: ''
    position: absolute
    top: 12px
    right: 12px
    height: 12px
    width: 12px
    +border-radius(6px)
    background: scale-lightness($bg, -15%)
    +transition(background .5s)
      
  &:after
    content: ''
    position: absolute
    bottom: 0px
    left: 0px
    height: 0
    width: 0
    border-bottom: 10px solid transparent
    border-right: 10px solid transparent
    +transition(border .5s)
      
\input.s34:checked+label:after
  border-right-width: 34px
  border-bottom-width: 34px
  border-bottom-color: scale-lightness($bg, -25%)
  +transition(border .5s .5s)