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

@import "../../bootstrap/mixins"
   
$mobile: 1050px
    
#editor-level-thangs-tab-view
  $addPaletteIconColumns: 3
  $extantThangsWidth: 300px
  $addPaletteIconWidth: 40px
  $addPaletteIconPadding: 0px
  $addPaletteIconMargin: 4px
  $addPaletteWidth: ($addPaletteIconWidth + 2 * $addPaletteIconPadding + 2 * $addPaletteIconMargin) * $addPaletteIconColumns + 20

  #toggle
    display: none
    position: absolute
    z-index: 11
    left: -14px
    @media screen and (max-width: $mobile)
      display: block
      
    .toggle
      left: 0
    
  .toggle
    display: none
    float: none
    z-index: 11
    position: absolute
    right: -14px
    z-index: 11
    margin: 0
    padding: 8px
    @media screen and (max-width: $mobile)
      display: block
  
  .thangs-column
    background-color: #E4CF8C
    
    @media screen and (max-width: $mobile)
      display: block
    
    h3
      @media screen and (max-width: $mobile)
        display: none
        
  #all-thangs
    display: block
    @media screen and (max-width: $mobile)
      display: none
  
  .thangs-container
    width: $extantThangsWidth
    position: absolute
    left: 0
    top: 0
    bottom: 0
    z-index: 11
    @media screen and (max-width: $mobile)
      width: auto
      left: 18px
      bottom: -18px
      
    .btn-group
      margin: 0
      @media screen and (max-width: $mobile)
        margin: 5px
    
    h3
      margin: 0 -20px 0 0
      
    .editor-nano-container
      height: 90%
      position: relative
      top: 20px
    #thangs-treema
      height: 100%
      width: 100%
      position: absolute
      left: 0
      right: 0
      bottom: 0
      overflow: scroll
      margin: 0
      outline: thin
      @media screen and (max-width: $mobile)
        margin: 5px
        top: 40px

      &.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-Item
        .treema-node
          display: none
        .treema-node.treema-Item
          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
    @media screen and (max-width: $mobile)
      margin-left: 0
      margin-right: 0
    padding: 0 20px
    box-sizing: border-box

    h3
      margin: 0 -10px 0 0
      text-align: center

  .add-thangs-palette
    width: $addPaletteWidth
    box-sizing: border-box
    position: absolute
    right: 0
    top: 0
    bottom: 0
    @media screen and (max-width: $mobile)
      display: none
      right: 18px
      z-index: 11
      width: $addPaletteWidth + 10
      bottom: -15px
      //height: auto
      //padding-bottom: 10px
      
    input
      width: $addPaletteWidth
      margin: 0
      margin-top: 5px
      padding-left: 5px
      @media screen and (max-width: $mobile)
        margin: 0 5px

    #thangs-list-container
      height: 90%

    #thangs-list
      position: relative
      right: 0
      top: 10px
      bottom: 10px
      overflow: scroll
      height: 100%
      margin: 0
      @media screen and (max-width: $mobile)
        margin: 0 5px

    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
      width: $addPaletteIconWidth
      height: $addPaletteIconWidth

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

      &:hover
        $hoverScaleIncreaseFactor: 0.2
        outline: 1px dotted blue
        img
          left: -($hoverScaleIncreaseFactor / 2) * $addPaletteIconWidth
          top: -($hoverScaleIncreaseFactor / 2) * $addPaletteIconWidth
          width: (1 + $hoverScaleIncreaseFactor) * $addPaletteIconWidth
          height: (1 + $hoverScaleIncreaseFactor) * $addPaletteIconWidth

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

  .world-container
    position: relative

    #canvas-wrapper
      width: 100%
      position: relative
      text-align: center
      
      #randomize-button
        position: absolute
        top: 45%
        height: 40px


  
    // 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%)