2014-09-07 20:18:36 +00:00
|
|
|
@import '../shared/shared'
|
|
|
|
|
|
|
|
|
|
size = 21px
|
|
|
|
|
stroke = 1px
|
|
|
|
|
knob = 5px
|
|
|
|
|
pw = 0px
|
|
|
|
|
ph = 4px
|
|
|
|
|
border-radius = 0// 100%
|
|
|
|
|
|
|
|
|
|
dur = 200ms
|
|
|
|
|
ease = cubic-bezier(0, 0.5, 0, 1)
|
|
|
|
|
|
|
|
|
|
fg = color-font//white//#777
|
|
|
|
|
bg = transparent
|
|
|
|
|
|
|
|
|
|
knob-dur = 200ms
|
|
|
|
|
stagger = 0ms
|
|
|
|
|
delay = 200ms
|
|
|
|
|
|
|
|
|
|
l = 70%
|
|
|
|
|
r = 30%
|
|
|
|
|
|
|
|
|
|
spacing = ( ( ( size - ph*2 ) - stroke * 3 ) / 2 )
|
|
|
|
|
xlen = 11px
|
|
|
|
|
|
|
|
|
|
#container
|
2014-09-08 02:43:10 +00:00
|
|
|
// font-size 0
|
|
|
|
|
// border: 1px solid blue
|
|
|
|
|
height: 100%
|
|
|
|
|
cursor: pointer
|
|
|
|
|
|
2014-09-07 20:18:36 +00:00
|
|
|
#button
|
2014-09-08 02:43:10 +00:00
|
|
|
width size
|
|
|
|
|
height size
|
|
|
|
|
box-sizing border-box
|
|
|
|
|
border-radius border-radius
|
|
|
|
|
padding ph pw
|
|
|
|
|
position relative
|
|
|
|
|
background bg
|
|
|
|
|
margin 0 auto
|
2014-09-07 20:18:36 +00:00
|
|
|
|
2014-09-08 02:43:10 +00:00
|
|
|
&.open-true
|
2014-09-07 20:18:36 +00:00
|
|
|
|
2014-09-08 02:43:10 +00:00
|
|
|
.one
|
|
|
|
|
transform translate3d(4px, 0, 0) rotate(45deg) translate3d(3.5px, 0, 0)
|
|
|
|
|
width xlen
|
2014-09-07 20:18:36 +00:00
|
|
|
|
2014-09-08 02:43:10 +00:00
|
|
|
.three
|
|
|
|
|
transform translate3d(4px, 0, 0) rotate(-45deg) translate3d(3.5px, 0, 0)
|
|
|
|
|
width xlen
|
2014-09-07 20:18:36 +00:00
|
|
|
|
2014-09-08 02:43:10 +00:00
|
|
|
.two
|
|
|
|
|
width 0
|
2014-09-07 20:18:36 +00:00
|
|
|
|
2014-09-08 02:43:10 +00:00
|
|
|
.slider
|
|
|
|
|
&:before
|
|
|
|
|
width 0
|
|
|
|
|
height 0
|
2014-09-07 20:18:36 +00:00
|
|
|
|
|
|
|
|
.slider
|
2014-09-08 02:43:10 +00:00
|
|
|
width size - pw * 2
|
|
|
|
|
border-radius stroke * 2
|
|
|
|
|
height stroke
|
2014-09-07 20:18:36 +00:00
|
|
|
background fg
|
|
|
|
|
position absolute
|
2014-09-08 02:43:10 +00:00
|
|
|
transform-origin stroke * 0.5 stroke * 0.5
|
|
|
|
|
transition all dur delay ease
|
2014-09-07 20:18:36 +00:00
|
|
|
|
|
|
|
|
&:before
|
2014-09-08 02:43:10 +00:00
|
|
|
width knob
|
|
|
|
|
height knob
|
|
|
|
|
margin-top -( ( knob - stroke ) / 2 )
|
|
|
|
|
margin-left -( ( knob ) / 2 )
|
|
|
|
|
border-radius knob
|
|
|
|
|
background fg
|
|
|
|
|
display inline-block
|
|
|
|
|
content ' '
|
|
|
|
|
position absolute
|
|
|
|
|
left l
|
|
|
|
|
transition left knob-dur cubic-bezier(0, 0.5, 0, 1), width 0.001s delay, height 0.001s delay
|
|
|
|
|
|
|
|
|
|
// #container:hover &
|
|
|
|
|
// left r
|
2014-09-07 20:18:36 +00:00
|
|
|
|
2014-09-08 02:43:10 +00:00
|
|
|
&.two
|
|
|
|
|
margin-top spacing + stroke
|
|
|
|
|
|
|
|
|
|
&:before
|
|
|
|
|
left r
|
|
|
|
|
transition-delay: stagger, delay, delay
|
|
|
|
|
|
|
|
|
|
// #container:hover &
|
|
|
|
|
// left l
|
|
|
|
|
|
|
|
|
|
&.three
|
|
|
|
|
margin-top spacing * 2 + stroke * 2
|
|
|
|
|
|
|
|
|
|
&:before
|
|
|
|
|
left l
|
|
|
|
|
transition-delay: stagger * 2, delay, delay
|
|
|
|
|
|
|
|
|
|
// #container:hover &
|
|
|
|
|
// left r
|
