codecombat/app/styles/play/level/tome/spell_palette.sass

92 lines
2 KiB
Sass
Raw Normal View History

@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
2014-01-03 13:32:13 -05:00
#spell-palette-view
position: absolute
left: 10px
right: 10px
padding: 0 4px 10px 40px
2014-01-03 13:32:13 -05:00
background-color: transparent
background-size: 100% 100%
z-index: 2
2014-04-02 17:40:06 -04:00
//overflow-y: auto
.code-palette-background
2014-01-03 13:32:13 -05:00
width: 100%
position: absolute
left: 0px
2014-01-03 13:32:13 -05:00
z-index: -1
&.disabled
@include opacity(0.80)
2014-01-03 13:32:13 -05:00
h4
color: white
2014-01-03 13:32:13 -05:00
font-size: 16px
line-height: 16px
margin: 25px 0 5px 2px
2014-01-03 13:32:13 -05:00
font-weight: normal
text-transform: uppercase
.nav > li > a
padding: 2px 20px 0px 20px
margin-bottom: 3px
ul.nav.nav-pills
margin-top: 15px
h4
margin-top: 2px
li.active a
background-color: transparent
&.multiple-tabs li.active a
background-color: darken(rgb(230, 212, 146), 30%)
&.multiple-tabs li:not(.active) a
cursor: pointer
2014-04-02 17:40:06 -04:00
.tab-content
height: 80px
.nano-pane
width: 7px
right: 5px
//.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus
// background-color: lighten(rgb(230, 212, 146), 10%)
.property-entry-column
display: inline-block
margin-right: 3px
vertical-align: top
&.hero .properties
@include flexbox()
@include flex-wrap()
@include flex-column()
@include flex-align-content-start()
.property-entry-item-group
display: inline-block
min-height: 38px
max-width: 212px
@include flexbox()
@include flex-wrap()
@include flex-center()
position: relative
background-color: rgb(20, 13, 8)
margin: 1px
img.item-image
width: 38px
height: 38px
position: absolute
&:not(:hover) img.item-image
-webkit-filter: contrast(50%) sepia(100%) saturate(500%) hue-rotate(7deg)
filter: contrast(50%) sepia(100%) saturate(1000%) hue-rotate(7deg)
.spell-palette-entry-view
margin-left: 38px
width: 174px
width: -webkit-calc(100% - 38px)
width: calc(100% - 38px)