mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-12-05 13:21:10 -05:00
238 lines
5 KiB
Sass
238 lines
5 KiB
Sass
@import "../../bootstrap/mixins"
|
|
|
|
$mobile: 1050px
|
|
|
|
#editor-level-thangs-tab-view
|
|
$addPaletteIconColumns: 3
|
|
$extantThangsWidth: 300px
|
|
$addPaletteIconWidth: 40px
|
|
$addPaletteIconPadding: 2px
|
|
$addPaletteIconMargin: 2px
|
|
$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-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
|
|
@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
|
|
|
|
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%)
|