101 lines
2.5 KiB
Stylus
101 lines
2.5 KiB
Stylus
|
button-bg(clr)
|
||
|
|
clr = lighten(clr, 50%)
|
||
|
|
light = lighten(clr, 30%)
|
||
|
|
dark-clr = darken(clr, 20%)
|
||
|
|
darker-clr = darken(clr, 50%)
|
||
|
|
darkest-clr = darken(darker-clr, 20%)
|
||
|
|
btn-clr = darken(darkest-clr, 30%)
|
||
|
|
background linear-gradient(top, clr, dark-clr)
|
||
|
|
border 1px solid darker-clr
|
||
|
|
border-top-color rgba(0, 0, 0, .1)
|
||
|
|
border-left-color rgba(0, 0, 0, .2)
|
||
|
|
border-right-color @border-left-color
|
||
|
|
border-bottom-color rgba(0, 0, 0, .3)
|
||
|
|
color btn-clr
|
||
|
|
&:hover
|
||
|
|
background linear-gradient(top, light, clr)
|
||
|
|
color lighten(btn-clr, 20%)
|
||
|
|
text-shadow 0 -1px 0 rgba(255, 255, 255, .10)
|
||
|
|
&:active, &.pressed
|
||
|
|
color darken(btn-clr, 50%)
|
||
|
|
text-shadow none
|
||
|
|
border-color darkest-clr
|
||
|
|
&.pressed
|
||
|
|
background darker-clr
|
||
|
|
&:active
|
||
|
|
background darkest-clr
|
||
|
|
|
||
|
|
.button
|
||
|
|
clearfix()
|
||
|
|
button-bg(#eee)
|
||
|
|
display inline-block
|
||
|
|
height 32px
|
||
|
|
line-height @height
|
||
|
|
border-radius 4px
|
||
|
|
margin-bottom 6px
|
||
|
|
padding 0 10px
|
||
|
|
cursor pointer
|
||
|
|
color #333
|
||
|
|
text-shadow 0 -1px 0 rgba(255, 255, 255, .25)
|
||
|
|
box-shadow inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.25)
|
||
|
|
position relative
|
||
|
|
&.block
|
||
|
|
display block
|
||
|
|
&:hover
|
||
|
|
box-shadow inset 0 1px 0 rgba(255,255,255,.125), 0 1px 2px rgba(0,0,0,.125)
|
||
|
|
.main_text
|
||
|
|
narrow-font()
|
||
|
|
font-weight 700
|
||
|
|
float left
|
||
|
|
.meta_info
|
||
|
|
font-size 12px
|
||
|
|
float right
|
||
|
|
font-family "Helvetica Neue", sans-serif
|
||
|
|
&.big
|
||
|
|
font-size 1.5em
|
||
|
|
height 3em
|
||
|
|
line-height @height
|
||
|
|
text-align center
|
||
|
|
.main_text
|
||
|
|
float none
|
||
|
|
.meta_info
|
||
|
|
position absolute
|
||
|
|
top 0
|
||
|
|
right 1em
|
||
|
|
&.button_blue
|
||
|
|
background linear-gradient(top, #0066cc, #0044cc)
|
||
|
|
text-shadow 0 -1px rgba(0, 0, 0, .3)
|
||
|
|
color #fff
|
||
|
|
&:hover
|
||
|
|
background linear-gradient(top, #0088cc, #0066cc)
|
||
|
|
&.button_red
|
||
|
|
background linear-gradient(top, #cc6600, #cc4400)
|
||
|
|
text-shadow 0 -1px rgba(0, 0, 0, .3)
|
||
|
|
color #fff
|
||
|
|
&:hover
|
||
|
|
background linear-gradient(top, #cc8800, #cc6600)
|
||
|
|
for $array in $types
|
||
|
|
&.{$array[0]}
|
||
|
|
button-bg($array[1])
|
||
|
|
&.disabled, &.disabled:hover
|
||
|
|
background #333
|
||
|
|
border-color #000
|
||
|
|
cursor default
|
||
|
|
color #666
|
||
|
|
text-shadow none
|
||
|
|
box-shadow none
|
||
|
|
|
||
|
|
.hover_info_moves
|
||
|
|
.hover_info
|
||
|
|
width 196px
|
||
|
|
display block
|
||
|
|
margin 0
|
||
|
|
&:first-child
|
||
|
|
border-radius 4px 4px 0 0
|
||
|
|
&:last-child
|
||
|
|
border-radius 0 0 4px 4px
|
||
|
|
border-top none
|
||
|
|
&:not(:first-child):not(:last-child)
|
||
|
|
border-radius 0
|
||
|
|
border-top none
|