1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-15 05:55:01 -05:00
kaiwa/public/css/app/callbar.styl
2013-10-23 19:57:46 +02:00

127 lines
2.4 KiB
Stylus

@import _mixins
@import _variables
$callHeight = 80px
#wrapper
position: relative !important
transition: all 1s
//&.hasActiveCall
// transform: translateY($callHeight)
#calls
position: fixed
top: 0
left: 0px
transition: all 1s
width: 100%
height: $callHeight
z-index: 1000
background: #DDD
&:empty, &.ending
transform: translateY(-($callHeight))
.call
height: $callHeight
padding: 0
margin: 0
&.incoming
background: $blue
.callTime
display: none
.callerName:before
content: "Incoming Call: "
&.waiting
background: $blue
.spinner div
background-color: #fff
&.calling
background: $blue
.callTime
display: none
.callerName:before
content: "Calling: "
&.accepted
background: $sidebarActive
.callerName:before
content: "On Call: "
&.ending
.callerName:before
content: "Call ending with: "
background: lighten($gray-light, 93%)
.callActions
position: absolute
left: 80px
top: 38px
display: block
width: 100%
nav
float: left
button
min-width: auto
background-color: rgba(255,255,255,.3)
gradient(rgba(255,255,255,.5),rgba(0,0,0,.1))
border:
top: 1px solid rgba(255,255,255,.6)
bottom: 1px solid rgba(0,0,0,.1)
left: 1px solid rgba(255,255,255,.2)
right: 1px solid rgba(255,255,255,.2)
width: 100px
margin-right: 10px
font-size: $font-size-large
color: rgba(0,0,0,.75)
text_shadow(rgba(255,255,255,.5),0,1px,0)
float: left
shadow(rgba(0,0,0,.3), 0, 1px, 3)
&:hover
background-color: rgba(255,255,255,.4)
&:active
inner_shadow(rgba(0,0,0,.2),0,1px,3)
padding-top: 11px
padding-bottom: 9px
border:
bottom: 1px solid rgba(255,255,255,1)
top: 1px solid rgba(0,0,0,.2)
.callerAvatar
float: left
width: 60px
height: 60px
margin: 10px
roundall(30px)
.callerName, .callTime
font-weight: $font-weight-bold
color: #fff
text_shadow(rgba(0,0,0,.7),0,1px,0)
line-height: 1
font-size: $font-size-h3
.caller
margin: 0
padding: 5px 0 0 0
padding-bottom: 0px
.callerName
display: inline
.callerNumber
display: inline
margin-left: 10px
.callTime
position: absolute
top: 12px
right: 40px
margin: 0