mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-29 02:25:37 -05:00
76 lines
1.7 KiB
Sass
76 lines
1.7 KiB
Sass
@import "../../bootstrap/mixins"
|
|
|
|
#add-thangs-view
|
|
$addPaletteIconColumns: 6
|
|
$addPaletteIconWidth: 40px
|
|
$addPaletteIconPadding: 0px
|
|
$addPaletteIconMargin: 4px
|
|
$addPaletteWidth: ($addPaletteIconWidth + 2 * $addPaletteIconPadding + 2 * $addPaletteIconMargin) * $addPaletteIconColumns + 20
|
|
|
|
width: $addPaletteWidth
|
|
background: white
|
|
box-sizing: border-box
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
bottom: 0
|
|
padding: 5px
|
|
border: 1px solid
|
|
|
|
input
|
|
width: 100%
|
|
margin-top: 5px
|
|
|
|
#thangs-list
|
|
position: absolute
|
|
left: 8px
|
|
top: 80px
|
|
bottom: 0px
|
|
overflow: scroll
|
|
margin: 0
|
|
|
|
h3
|
|
margin: 0 0 10px
|
|
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
|
|
|