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

$selected-area-height: 150px
@import "../bootstrap/mixins"

//#inventory-view *
  

#inventory-view
  position: relative
  height: 600px
  +user-select(none)
  
  h3
    margin: 0
  
  #equipped
    width: 75%
    position: absolute
    left: 0
    top: 0
    bottom: $selected-area-height + 10
    right: 0
    overflow: scroll
    
    .item-slot.disabled
      opacity: 0.5
    
    .panel
      text-align: center
      width: 31.3%
      margin: 5px 2% 5px 0
      float: left
      cursor: pointer
      
      .panel-heading
        padding: 5px
      
    .panel-info .panel-body
      background-color: #e0f0f5
      
    .panel-body
      height: 50px
      padding: 5px
      overflow: scroll
      font-size: 12px

  #available-equipment
    width: 25%
    position: absolute
    right: 0
    top: 0 
    bottom: $selected-area-height + 10
    overflow: scroll
    
    h3
      margin-bottom: 5px
      
  .list-group-item.active
    background-color: #e0f0f5
    
  .list-group-item.equipped
    display: none
    
  .item-view
    cursor: pointer
    
  #selected-items
    position: absolute
    height: $selected-area-height
    left: 0
    right: 0
    bottom: 0
    text-align: center

    #selected-equipped-item, #selected-available-item
      text-align: left
      position: absolute
      bottom: 0
      top: 0
      overflow: scroll
      padding: 10px
      height: 100%
      width: 49%
      
      img
        width: 100px
        height: 100px
        
      .item-info
        margin-left: 110px
      
    #selected-equipped-item
      left: 0
    
    #selected-available-item
      right: 0

  $swap-item-height: 40px
    
  #swap-button
    position: relative
    top: ($selected-area-height / 2) - ($swap-item-height / 2)
    height: $swap-item-height
    font-size: 24px
    line-height: 24px
    display: inline-block
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`$selected-area-height: 150px`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`@import "../bootstrap/mixins"`

			`//#inventory-view *`

Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00
Starting skeleton for GameMenuModal and its subviews. 2014-08-08 14:36:41 -04:00			`#inventory-view`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`position: relative`
			`height: 600px`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`+user-select(none)`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00
Starting skeleton for GameMenuModal and its subviews. 2014-08-08 14:36:41 -04:00			`h3`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`margin: 0`

			`#equipped`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`width: 75%`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`position: absolute`
			`left: 0`
			`top: 0`
			`bottom: $selected-area-height + 10`
			`right: 0`
			`overflow: scroll`

			`.item-slot.disabled`
			`opacity: 0.5`

			`.panel`
			`text-align: center`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`width: 31.3%`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`margin: 5px 2% 5px 0`
			`float: left`
			`cursor: pointer`

			`.panel-heading`
			`padding: 5px`

			`.panel-info .panel-body`
			`background-color: #e0f0f5`

			`.panel-body`
			`height: 50px`
			`padding: 5px`
			`overflow: scroll`
			`font-size: 12px`

			`#available-equipment`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`width: 25%`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`position: absolute`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`right: 0`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`top: 0`
			`bottom: $selected-area-height + 10`
			`overflow: scroll`

			`h3`
			`margin-bottom: 5px`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`.list-group-item.active`
			`background-color: #e0f0f5`

			`.list-group-item.equipped`
			`display: none`

Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`.item-view`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`cursor: pointer`

			`#selected-items`
			`position: absolute`
			`height: $selected-area-height`
			`left: 0`
			`right: 0`
			`bottom: 0`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`text-align: center`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00
			`#selected-equipped-item, #selected-available-item`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`text-align: left`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00			`position: absolute`
			`bottom: 0`
			`top: 0`
			`overflow: scroll`
			`padding: 10px`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`height: 100%`
			`width: 49%`
Working on the inventory view. Added a way to get the current equipment config from the inventory view. 2014-08-13 20:21:37 -04:00
			`img`
			`width: 100px`
			`height: 100px`

			`.item-info`
			`margin-left: 110px`

			`#selected-equipped-item`
			`left: 0`

			`#selected-available-item`
Added a swap button, as well as moving my testing to the demo view and adding some specifications, fixing bugs and tweaking interactions along the way. 2014-08-14 16:41:32 -04:00			`right: 0`

			`$swap-item-height: 40px`

			`#swap-button`
			`position: relative`
			`top: ($selected-area-height / 2) - ($swap-item-height / 2)`
			`height: $swap-item-height`
			`font-size: 24px`
			`line-height: 24px`
			`display: inline-block`