2014-09-03 18:47:32 +00:00
|
|
|
@import '../shared/shared'
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-03 18:47:32 +00:00
|
|
|
// redefine touch because we are the host ...
|
|
|
|
|
touch( val = true )
|
2014-09-07 20:18:36 +00:00
|
|
|
{ '.touch-' + val } &
|
2014-09-03 18:47:32 +00:00
|
|
|
{ block }
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
dur = 0.4s
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
#panel
|
|
|
|
|
transition transform dur cubic-bezier( 0, 0.8, 0, 1 )
|
2014-09-03 18:47:32 +00:00
|
|
|
background color-panel
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.autoplace-true &
|
2014-09-03 18:47:32 +00:00
|
|
|
width panel-width
|
|
|
|
|
position fixed
|
|
|
|
|
top 0
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.autoplace-true.touch-true &
|
|
|
|
|
width panel-width-touch
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.docked-false &
|
|
|
|
|
right 20px
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.docked-true &
|
|
|
|
|
right 0
|
|
|
|
|
bottom 0
|
|
|
|
|
overflow auto
|
|
|
|
|
-webkit-overflow-scrolling touch
|
|
|
|
|
|
|
|
|
|
.docked-true.open-false &
|
|
|
|
|
transform translate3d( panel-width, 0, 0 )
|
|
|
|
|
overflow visible
|
|
|
|
|
|
|
|
|
|
.docked-true.open-false.touch-true &
|
|
|
|
|
transform translate3d( panel-width-touch, 0, 0 )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#controllers
|
2014-08-27 00:01:15 +00:00
|
|
|
|
|
|
|
|
panel-font()
|
2014-09-07 20:18:36 +00:00
|
|
|
.docked-true &
|
|
|
|
|
position absolute
|
|
|
|
|
width 100%
|
|
|
|
|
|
|
|
|
|
top row-height * 1.5
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#closeButton
|
|
|
|
|
panel-font()
|
2014-09-03 18:47:32 +00:00
|
|
|
user-select none
|
|
|
|
|
cursor pointer
|
|
|
|
|
text-align center
|
|
|
|
|
padding padding * 0.75 padding
|
|
|
|
|
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
gui-button
|
|
|
|
|
panel-font()
|
|
|
|
|
background color-panel
|
|
|
|
|
height row-height
|
2014-09-03 18:47:32 +00:00
|
|
|
position absolute
|
2014-09-07 20:18:36 +00:00
|
|
|
transition all dur cubic-bezier( 0, 0.8, 0, 1 )
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
// .open-false &
|
|
|
|
|
// transition-delay stagger * 0.5
|
|
|
|
|
.docked-true &
|
|
|
|
|
top 0
|
|
|
|
|
right 0
|
|
|
|
|
width row-height*1.5
|
|
|
|
|
height row-height*1.5
|
|
|
|
|
box-sizing border-box
|
2014-09-08 03:36:20 +00:00
|
|
|
background color-panel
|
|
|
|
|
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.docked-true.open-false &
|
|
|
|
|
transform translate3d( - panel-width, 0, 0 )
|
2014-08-27 00:01:15 +00:00
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.docked-true.open-false.touch-true &
|
|
|
|
|
transform translate3d( - panel-width-touch, 0, 0 )
|
2014-08-27 00:01:15 +00:00
|
|
|
|
|
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
.docked-false &
|
|
|
|
|
right 0
|
|
|
|
|
left 0
|
