d-md-components
Version:
A pack of components for Derby according to Google's Material Design based upon mdl (getmdl.io).
69 lines (59 loc) • 2.55 kB
text/stylus
button-size = 28px
.material-pagination
margin-top 40px
text-align center
user-select none
.numbers
display inline-block
margin 0 8px
.ellipsis
display inline-block;
font-size 16px
position relative
margin 1px
width button-size
top 3px
.mdl-button::before
content "\00a0" //  
position absolute
left 0
top 0
opacity 0
height button-size
width button-size
background grey
border-radius 50%
z-index -1
transform scale(0)
transition all 800ms cubic-bezier(0.23, 1, 0.32, 1) 50ms
.mdl-button
font-size 16px
color rgba(0, 0, 0, 0.87)
border-radius 50%
min-width button-size
height button-size
font-weight 400
line-height button-size
margin 1px
padding 0
&:hover
&:focus:not(.active)
&:focus:not(:active)
color white
background none
transition color 300ms ease-out
&:hover::before
&:focus:not(:active)::before
&:focus:not(.active)::before
&.active::before
transform scale(1)
opacity 0.53
transition all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms
&.active
&:active
background-color rgba(0, 0, 0, 0.26)
transition background 350ms cubic-bezier(0.23, 1, 0.32, 1) 100ms
color white
>.material-icons
line-height button-size
font-size 19px