codecombat/app/styles/editor/level/thangs_tab.sass

@import "../../bootstrap/mixins"

#editor-level-thangs-tab-view
  $addPaletteIconColumns: 3
  $extantThangsWidth: 300px
  $addPaletteIconWidth: 40px
  $addPaletteIconPadding: 2px
  $addPaletteIconMargin: 2px
  $addPaletteWidth: ($addPaletteIconWidth + 2 * $addPaletteIconPadding + 2 * $addPaletteIconMargin) * $addPaletteIconColumns + 20

  .thangs-container
    width: $extantThangsWidth
    position: absolute
    left: 0
    top: 0
    bottom: 0
    
    h3
      margin: 0 -20px 0 0
      
    #thangs-treema
      position: absolute
      top: 80px
      left: 0
      right: 0
      bottom: 0
      overflow: scroll

      &.hide-except-Unit
        .treema-node
          display: none
        .treema-node.treema-Unit
          display: block

      &.hide-except-Doodad
        .treema-node
          display: none
        .treema-node.treema-Doodad
          display: block

      &.hide-except-Floor
        .treema-node
          display: none
        .treema-node.treema-Floor
          display: block

      &.hide-except-Wall
        .treema-node
          display: none
        .treema-node.treema-Wall
          display: block

      &.hide-except-Misc
        .treema-node
          display: none
        .treema-node.treema-Misc
          display: block
    
    .treema-children .treema-row *
      cursor: pointer !important

  .world-container
    margin-left: $extantThangsWidth
    margin-right: $addPaletteWidth
    padding: 0 20px
    box-sizing: border-box

    h3
      margin: 0 -10px 0 0

  .add-thangs-palette
    width: $addPaletteWidth
    box-sizing: border-box
    position: absolute
    right: 0
    top: 0
    bottom: 0
    
    #thangs-list
      position: absolute
      right: 0
      top: 40px
      bottom: 0
      overflow: scroll

    h3
      margin: 0 -20px 0 0
      width: 100%
      
    h4
      margin: 0 0 10px
      clear: both
      padding: 5px
      background: rgba(150, 150, 150, 0.5)
      width: $addPaletteWidth - 20px
      box-sizing: border-box
      
    .clearfix
      margin-bottom: 20px

    .add-thang-palette-icon
      position: relative
      float: left
      background: white
      padding: $addPaletteIconPadding
      margin: $addPaletteIconMargin
      cursor: pointer

      img
        width: $addPaletteIconWidth
        height: $addPaletteIconWidth
        transition: box-shadow 0.25s ease-out

      &.selected
        border: 1px solid blue
        margin: $addPaletteIconPadding - 1px
        @include box-shadow(0px 5px 25px rgba(79, 79, 213, 0.6))
        background: #add8e6

  .world-container
    position: relative

    #canvas-wrapper
      width: 100%
      position: relative
  
    // Below snatched from play/level.sass; should refactor?
  
    canvas#surface
      background-color: #ddd
      width: 100%
      display: block
      z-index: 1
      
    $GI: 0.5  // gradient intensity; can tweak this 0-1
  
    .gradient
      position: absolute
      z-index: 10
  
    #canvas-left-gradient
      left: 0px
      width: 5px
      background: linear-gradient(to left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)
      bottom: 0
      top: 0
  
    #canvas-top-gradient
      top: 0
      height: 5px
      left: 0
      right: 0
      background: linear-gradient(to top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8*$GI) 100%)