67 lines
1.1 KiB
Plaintext
Raw Normal View History

const inventory-slot-size = 64px
2017-10-04 11:39:59 +00:00
.inventory
display grid
grid-gap 0.25rem
2018-11-21 11:35:25 +00:00
grid-template-columns repeat(auto-fill, inventory-slot-size)
2017-10-04 11:39:59 +00:00
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
2019-08-30 07:22:08 +00:00
svg-icon
2017-10-04 11:39:59 +00:00
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