d-md-components
Version:
A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).
55 lines (46 loc) • 2.04 kB
text/stylus
.d-md-slider
margin 0 0 28px 0
.mdl-slider
margin 0
.mdl-slider__background-flex
margin 0
width 100%
.bubble-container
position absolute
height 20px
left 6px
right 6px
.bubble
display inline-block
height 28px
line-height 28px
min-width 28px
padding 0 6px
text-align center
position absolute
bottom 28px
border-radius 14px
font-size 12px
color white
white-space nowrap
transform-origin 14px 100%
transform translate(-14px, 0) scale(0)
transition transform 0.1s linear
.mdl-slider.is-upgraded:active ~ .bubble-container>.bubble
transform translate(-14px, 0) scale(1)
transition transform 0.1s linear
.bubble:after
position absolute
content ''
left 0
border-radius 16px
top 19px
border-left 14px solid transparent
border-right 14px solid transparent
border-top-width 16px
border-top-style solid
z-index -1
.mdl-slider.is-upgraded:focus:not(:active)::-webkit-slider-thumb
box-shadow none
.mdl-slider.is-upgraded:focus:not(:active)::-moz-range-thumb
box-shadow none