2018-03-18 18:09:58 +00:00
|
|
|
const inventory-slot-size = 64px
|
2017-10-04 11:39:59 +00:00
|
|
|
|
|
|
|
|
.inventory
|
|
|
|
|
display grid
|
|
|
|
|
grid-gap 0.25rem
|
|
|
|
|
grid-template-columns repeat(auto-fit, inventory-slot-size)
|
|
|
|
|
grid-auto-rows inventory-slot-size
|
|
|
|
|
justify-content center
|
|
|
|
|
width 100%
|
|
|
|
|
max-width 450px
|
|
|
|
|
margin 0 auto
|
|
|
|
|
|
|
|
|
|
.inventory-slot
|
|
|
|
|
ui-element
|
|
|
|
|
position relative
|
|
|
|
|
display flex
|
|
|
|
|
align-items center
|
|
|
|
|
justify-content center
|
2017-10-06 10:44:55 +00:00
|
|
|
font-size 2.5rem
|
|
|
|
|
|
|
|
|
|
[draggable="true"]
|
|
|
|
|
:hover
|
|
|
|
|
cursor pointer
|
|
|
|
|
|
2018-04-08 20:10:45 +00:00
|
|
|
.shop-item-icon
|
2017-10-06 10:44:55 +00:00
|
|
|
animation hover-item 1s infinite ease-in-out
|
2018-03-18 18:09:58 +00:00
|
|
|
|
2017-10-04 11:39:59 +00:00
|
|
|
.icon
|
|
|
|
|
margin 0
|
|
|
|
|
pointer-events none
|
|
|
|
|
|
2017-10-06 10:44:55 +00:00
|
|
|
// [data-item-id="pro-account-3"]
|
2018-04-08 20:10:45 +00:00
|
|
|
// .shop-item-icon
|
2017-10-06 10:44:55 +00:00
|
|
|
// opacity 0.7
|
|
|
|
|
|
|
|
|
|
// [data-item-id="pro-account-6"]
|
2018-04-08 20:10:45 +00:00
|
|
|
// .shop-item-icon
|
2017-10-06 10:44:55 +00:00
|
|
|
// opacity 0.8
|
|
|
|
|
|
|
|
|
|
// [data-item-id="pro-account-12"]
|
2018-04-08 20:10:45 +00:00
|
|
|
// .shop-item-icon
|
2017-10-06 10:44:55 +00:00
|
|
|
// opacity 0.9
|
|
|
|
|
|
|
|
|
|
// [data-item-id="pro-account-24"]
|
2018-04-08 20:10:45 +00:00
|
|
|
// .shop-item-icon
|
2017-10-06 10:44:55 +00:00
|
|
|
// opacity 1.0
|
|
|
|
|
|
|
|
|
|
animation hover-item
|
|
|
|
|
0%
|
|
|
|
|
transform rotateZ(0)
|
|
|
|
|
20%
|
|
|
|
|
transform rotateZ(5deg)
|
|
|
|
|
80%
|
|
|
|
|
transform rotateZ(-5deg)
|
|
|
|
|
100%
|
|
|
|
|
transform rotateZ(0)
|
|
|
|
|
|
2017-10-04 11:39:59 +00:00
|
|
|
.inventory-slot-quantity
|
|
|
|
|
position absolute
|
|
|
|
|
bottom 0.25rem
|
|
|
|
|
right 0.25rem
|
|
|
|
|
font-size 0.8rem
|
|
|
|
|
line-height 1em
|
|
|
|
|
opacity 0.5
|
|
|
|
|
pointer-events none
|
|
|
|
|
|
|
|
|
|
.drag-enter
|
|
|
|
|
border-style dashed
|
