codecombat/app/styles/editor/level/thangs_tab.sass
2014-03-18 05:47:53 +01:00

154 lines
3.3 KiB
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: relative
right: 0
top: 0
bottom: 0
overflow: scroll
height: 100%
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%)