2017-10-06 12:44:55 +02:00

68 lines
1.1 KiB
Plaintext

inventory-slot-size = 64px
.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
font-size 2.5rem
[draggable="true"]
:hover
cursor pointer
.item-icon
animation hover-item 1s infinite ease-in-out
.icon
margin 0
pointer-events none
// [data-item-id="pro-account-3"]
// .item-icon
// opacity 0.7
// [data-item-id="pro-account-6"]
// .item-icon
// opacity 0.8
// [data-item-id="pro-account-12"]
// .item-icon
// opacity 0.9
// [data-item-id="pro-account-24"]
// .item-icon
// opacity 1.0
animation hover-item
0%
transform rotateZ(0)
20%
transform rotateZ(5deg)
80%
transform rotateZ(-5deg)
100%
transform rotateZ(0)
.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