dialpad.sass

@import _define.sass

$font-size: 16px

// Your base font-size in pixels
$em: $font-size / 1em

body
  font-family: sans-serif

.dialerwrapper
  width: 280px
  height: 350px
  background:
    color: #ccc
  
  .numberEntry
    width: 100%
    height: 15%
    text:
      align: center
      shadow: 1px 1px 0 #555
    font:
      size: ($font-size * 2)/$em
    color: #fff
    outline: 0
    border: 0
    background: #959595
    background: -moz-linear-gradient(top, #959595 50%, #767676 50%, #565656 100%)
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#959595), color-stop(50%,#767676), color-stop(100%,#565656))
    background: -webkit-linear-gradient(top, #959595 50%,#767676 50%,#565656 100%)
    background: -o-linear-gradient(top, #959595 50%,#767676 50%,#565656 100%)
    background: -ms-linear-gradient(top, #959595 50%,#767676 50%,#565656 100%)
    background: linear-gradient(top, #959595 50%,#767676 50%,#565656 100%)
    padding: 0
    margin: 0
    border-top: 1px solid #777
    
    &:focus
      outline: 0

  #dialpad
    width: 100%
    height: 100%
    list-style: none
    margin: 0
    padding: 0
    
    li
      width: inherit
      height: 21.25%
      white-space: nowrap
      font:
        size: 0
      margin: 0
      padding: 0
        
    button
      display: inline-block
      vertical-align: top
      width: 33.3%
      height: 100%
      background: #eee
      font:
        size: $font-size
      text:
        align: center
      outline: 0
      border:
        top: 1px solid #fff
        right: 1px solid #fff
        bottom: 1px solid #c7c7c7
        left: 1px solid #c7c7c7
        radius: 0
      margin: 0
      padding: 0
      color: #555
      vertical-align: middle
            
      &:hover
        background:
          color: #cecece
              
      p
        width: 100%
        display: inline-table
        font:
          size: ($font-size * 1.2)/$em
          weight: 700
        margin: 0
      
      div
        text:
          transform: uppercase
        font:
          size: ($font-size * .6)/$em
                  
  #actions
    nav
      position: relative
        
    a
      width: 33.3%
      
.close_dialer
  background:
    color: #555
  height: 25px
  width: 100%
  display: block
  position: relative

.cancel
  position: absolute
  top: 4px
  right: 10px
  padding: 3px
  line-height: 9px
  display: block
  color: #fff
  border: 1px solid #fff
  background:
    color: #666
  
  &:hover
    color: #fff
    background:
      color: #BB0000
    cursor: pointer

#screen
  overflow: hidden
  padding: 15px 15px 0 15px
  z-index: 99

  header
    background-color: #555

  header, footer
    height: 40px
    width: 100%
    padding: 10px 0
    display: block
    
    nav
      width: 100%
      display: table
      margin: 0 auto
      border: 1px solid #222
      border:
        radius: 10px
      
      a
        display: table-cell
        width: 50%
        color: #eee
        font-weight: 900
        text:
          decoration: none
          align: center
          shadow: 1px 1px 0 #222
        letter-spacing: .3px
        padding: 10px 0
        border:
          left: 1px solid #222
          right: 1px solid #777
        background: #888888
        background: -moz-linear-gradient(top, #888888 0%, #555555 100%) repeat-x, #888
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888888) repeat-x, color-stop(100%,#555555)), #888
        background: -webkit-linear-gradient(top, #888888 0%,#555555 100%) repeat-x, #888
        background: -o-linear-gradient(top, #888888 0%,#555555 100%) repeat-x, #888
        background: -ms-linear-gradient(top, #888888 0%,#555555 100%) repeat-x, #888
        background: linear-gradient(top, #888888 0%,#555555 100%) repeat-x, #888
        -moz-transition: background 1s linear 
        -webkit-transition: all 0.3s linear 0
        -moz-transition-property: all 
        -moz-transition-duration: 1s  
        -moz-transition-timing-function: linear
        -moz-transition-delay: linear
            
        &:first-child
          border:
            left: 0
            top-left-radius: 10px
            bottom-left-radius: 10px

        &:last-child
          margin: 0
          border:
            right: 0
            top-right-radius: 10px
            bottom-right-radius: 10px
                
        &:hover
          background-position: 0 15px
          cursor: pointer   

#login

  #screen 
    padding: 0
    margin: 0 10px 10px 10px
    position: relative

    &:after
      content: ""
      width: 280px
      height: 1px
      display: block
      position: absolute
      left: 1px
      bottom: 0px
      background: #ccc
      z-index: 200000000

  footer
    display: none

  .dialerContainer


  .dialerwrapper
    background-color: #fff
    border-right: 1px solid #ccc

  .numberEntry
    border-left: 0px solid #ddd
    margin-left: 1px
    margin-right: 2px
    padding-top: 3px
    border-top: 1px solid #ddd
    +gradient(#eee, #ddd)
    color: #555
    +text_shadow(#fff, 0, 1px, 0)