codecombat/app/styles/game-menu/inventory-view.sass

@import "app/styles/mixins"

$totalWidth: 706px - 2 * 20px
$inventoryHeight: 445px
$equippedWidth: 450px
$itemSlotMargin: 5px
$itemSlotSize: ($equippedWidth - 6 * 2 * $itemSlotMargin) / 6
$itemSlotSizeWithMargin: $itemSlotSize + 2 * $itemSlotMargin
$itemSlotBorderWidth: 2px
$itemSlotInnerWidth: $itemSlotSize - 2 * $itemSlotBorderWidth
$heroContainerWidth: 4 * $itemSlotSizeWithMargin
$heroContainerHeight: $inventoryHeight - $itemSlotSizeWithMargin
$selectedAreaHeight: 150px
$stashMargin: 20px
$stashWidth: $totalWidth - $equippedWidth - $stashMargin

#inventory-view
  position: relative
  height: $inventoryHeight
  +user-select(none)
  
  h3
    margin: 0

  .draggable-item
    width: $itemSlotSize
    height: $itemSlotSize
  
  #equipped
    width: $equippedWidth
    position: absolute
    left: 0
    top: 0
    bottom: 0
    //bottom: $selectedAreaHeight + 10
    right: 0
    overflow: hidden

    .item-slot-row
      //background-color: rgba(35, 112, 124, 0.5)
      height: $itemSlotSizeWithMargin
      clear: both
      margin: 0px auto

      &.row-4
        width: 4 * $itemSlotSizeWithMargin

    .item-slot-column
      //background-color: rgba(112, 124, 35, 0.5)
      width: $itemSlotSizeWithMargin
      height: 5 * $itemSlotSizeWithMargin
      float: left
      //margin-top: 30px
      
    .item-slot
      width: $itemSlotSize
      height: $itemSlotSize
      margin: $itemSlotMargin
      background-color: white
      float: left
      position: relative
      cursor: pointer
      @include transition(0.5s ease)
      
      &.selected
        .placeholder, .item-container .item-view img
          border-color: #28f
          @include box-shadow(0 0 10px #28f)

      &.should-equip
        background-color: #8fa
        outline: 2px solid #8af
        @include box-shadow(2px 2px 4px black)

      &.droppable
        outline: 2px solid blue
        @include box-shadow(4px 4px 6px black)

      &.droppable-hover
        outline: 4px solid blue
        @include box-shadow(6px 6px 8px black)

      .placeholder
        width: 100%
        height: 100%
        background-size: cover
        border: $itemSlotBorderWidth solid #888
        @include opacity(0.4)
        background-image: url(/images/pages/game-menu/slot-icons.png)

      &[data-slot="misc-1"] .placeholder
        background-position: (-0 * $itemSlotInnerWidth) 0px

      &[data-slot="minion"] .placeholder
        background-position: (-1 * $itemSlotInnerWidth) 0px

      &[data-slot="programming-book"] .placeholder
        background-position: (-3 * $itemSlotInnerWidth) 0px

      // Only for wizards...
      //&[data-slot="spellbook"] .placeholder
      //  background-position: (-2 * $itemSlotInnerWidth) 0px

      &[data-slot="misc-0"] .placeholder
        background-position: (-4 * $itemSlotInnerWidth) 0px

      &[data-slot="wrists"] .placeholder
        background-position: (-5 * $itemSlotInnerWidth) 0px

      &[data-slot="left-ring"] .placeholder
        background-position: (-6 * $itemSlotInnerWidth) 0px

      &[data-slot="right-ring"] .placeholder
        background-position: (-7 * $itemSlotInnerWidth) 0px

      &[data-slot="torso"] .placeholder
        background-position: (-8 * $itemSlotInnerWidth) 0px

      &[data-slot="feet"] .placeholder
        background-position: (-9 * $itemSlotInnerWidth) 0px

      &[data-slot="neck"] .placeholder
        background-position: (-10 * $itemSlotInnerWidth) 0px

      &[data-slot="waist"] .placeholder
        background-position: (-11 * $itemSlotInnerWidth) 0px

      &[data-slot="eyes"] .placeholder
        background-position: (-12 * $itemSlotInnerWidth) 0px

      &[data-slot="head"] .placeholder
        background-position: (-13 * $itemSlotInnerWidth) 0px

      &[data-slot="pet"] .placeholder
        background-position: (-14 * $itemSlotInnerWidth) 0px

      &[data-slot="gloves"] .placeholder
        background-position: (-15 * $itemSlotInnerWidth) 0px

      &[data-slot="left-hand"] .placeholder
        background-position: (-16 * $itemSlotInnerWidth) 0px

      &[data-slot="right-hand"] .placeholder
        background-position: (-17 * $itemSlotInnerWidth) 0px

      &[data-slot="flag"] .placeholder
        //background-position: (-18 * $itemSlotInnerWidth) 0px
        background-position: (-2 * $itemSlotInnerWidth) 0px

      .item-container
        position: absolute
        left: 0
        top: 0

        .item-view
          img
            width: $itemSlotSize
            height: $itemSlotSize
            border: 2px solid black
            background-color: white

          .item-info
            display: none
    
    .item-slot.disabled
      opacity: 0.5

    .hero-container
      //background-color: rgba(31, 0, 200, 0.25)
      float: left
      position: relative
      @include transition(0.5s ease)

      &.droppable
        outline: 2px solid blue
        @include box-shadow(4px 4px 6px black)

      &.droppable-hover
        outline: 4px solid blue
        @include box-shadow(6px 6px 8px black)

      .equipped-hero-canvas, .hero-feature-image
        width: $heroContainerWidth
        height: $heroContainerHeight

      .hero-feature-image
        text-align: center

        img
          height: $heroContainerHeight

  #available-equipment
    width: $stashWidth
    position: absolute
    right: 0
    top: 0 
    bottom: 0
    overflow-y: scroll
    border: 2px solid #ccc
    padding: 4px
    background-color: white

  .list-group-item
    padding: 4px 0
    @include transition(0.5s ease)

    &.active
      background-color: #e0f0f5

      .item-info:after
        content: ' (available)'
    
    &.should-equip
      background-color: #8fa
      outline: 2px solid #8af
      @include box-shadow(4px 4px 6px black)
      z-index: 1

      .item-info:after
        content: ' (double-click to equip)'
        font-weight: bold
      
    &.equipped
      background-color: #ff5

      .item-view
        cursor: default
      .item-info:after
        content: ' (equipped)'

    &.locked
      background-image: url(/images/pages/game-menu/lock.png)
      background-size: 25px 25px
      background-repeat: no-repeat
      background-position: 98% 90%

      .item-view
        cursor: default
  
        h4, img
          //@include filter(contrast(50%) brightness(65%))
          @include opacity(0.6)
  
        .item-info:after
          content: ' (locked)'

  .item-view
    cursor: pointer
    
  #selected-items
    $selectedItemsContainerMargin: 20px
    $selectedItemMargin: 10px
    $selectedItemImageSize: 75px

    position: absolute
    top: $selectedItemsContainerMargin
    right: $selectedItemsContainerMargin
    bottom: $selectedItemsContainerMargin
    left: $selectedItemsContainerMargin
    text-align: center

    #selected-equipped-item, #selected-available-item
      text-align: left
      overflow-y: scroll
      margin: 0
      height: 48.4%
      height: -webkit-calc(50% - $selectedItemMargin / 2)
      height: calc(50% - $selectedItemMargin / 2)
      width: 100%
      padding: 10px 5px 10px 10px
      position: relative
      display: none
      
      img
        margin-top: 21px
        width: $selectedItemImageSize
        height: $selectedItemImageSize
        margin-right: 10px
        
      .item-info
        width: 110px
        width: -webkit-calc(100% - 75px - 10px)
        width: calc(100% - 75px - 10px)

      > h3
        position: absolute
        left: 0px
        top: 0px
        padding: 5px

    #selected-equipped-item
      margin-bottom: $selectedItemMargin
      padding-bottom: 20px
      background-color: #ff5

    #selected-available-item
      padding-top: 15px
      background-color: #e0f0f5
      bottom: 0