59 lines
1.0 KiB
Stylus
59 lines
1.0 KiB
Stylus
.battle-list
|
|
position absolute
|
|
top 0
|
|
bottom 0
|
|
left 0
|
|
right 0
|
|
overflow auto
|
|
|
|
h2
|
|
display block
|
|
margin-left 10px
|
|
|
|
.battle-list-collection
|
|
padding-right 10px
|
|
|
|
.empty
|
|
margin-left 10px
|
|
|
|
.battle-list-item-wrapper
|
|
float left
|
|
width 100%
|
|
padding-left 10px
|
|
padding-bottom 10px
|
|
box-sizing border-box
|
|
|
|
.battle-list-item
|
|
cursor pointer
|
|
border 1px solid #DDD
|
|
background #F5F5F5
|
|
box-shadow 1px 2px 0 rgba(0, 0, 0, 0.2)
|
|
padding 10px
|
|
|
|
&:hover
|
|
background: #FFF
|
|
|
|
.vs
|
|
font-weight bold
|
|
margin 0 5px
|
|
|
|
// Normally, our media queries use max-width to scale down, but for this page we want to scale up
|
|
@media screen and (min-width: 1000px)
|
|
.battle-list-item-wrapper
|
|
width 50%
|
|
|
|
@media screen and (min-width: 1400px)
|
|
.battle-list-item-wrapper
|
|
width 33%
|
|
|
|
@media screen and (min-width: 1800px)
|
|
.battle-list-item-wrapper
|
|
width 25%
|
|
|
|
@media screen and (min-width: 2200px)
|
|
.battle-list-item-wrapper
|
|
width 20%
|
|
|
|
@media screen and (min-width: 2600px)
|
|
.battle-list-item-wrapper
|
|
width 16.6% |