codecombat/app/styles/play/level/tome/cast_button.sass
2014-01-25 15:11:29 -08:00

87 lines
1.9 KiB
Sass

@import "../../../bootstrap/mixins"
// keyframes mixin from https://gist.github.com/ericam/1607696
=keyframes($name)
@-webkit-keyframes #{$name}
@content
@-moz-keyframes #{$name}
@content
@-ms-keyframes #{$name}
@content
@-o-keyframes #{$name}
@content
@keyframes #{$name}
@content
+keyframes(castablePulse)
from
@include box-shadow(0px 0px 8px #333)
50%
@include box-shadow(0px 0px 35px skyblue)
to
@include box-shadow(0px 0px 8px #333)
+keyframes(castablePulseButton)
from
color: white
50%
color: skyblue
to
color: white
#cast-button-view
display: none
position: absolute
width: 35%
.cast-button-group
z-index: 2
@include opacity(77)
width: 100%
.button-progress-overlay
position: absolute
left: 0
top: 0
bottom: 0
// This transition time should roughly match the world progress update interval
@include transition(width .2s linear)
&.castable .button-progress-overlay, &.casting .button-progress-overlay
background-color: rgba(255, 255, 255, 0.5)
&:hover, &.castable
@include opacity(100)
&.castable
-webkit-animation-name: castablePulse
-webkit-animation-duration: 3s
-webkit-animation-iteration-count: infinite
.cast-button
font-weight: bold
-webkit-animation-name: castablePulseButton
-webkit-animation-duration: 3s
-webkit-animation-iteration-count: infinite
&:not(.castable):not(:hover)
.cast-options-button
// Mimic the disabled visuals
@include opacity(65)
background-image: none
@include box-shadow(none)
.btn
padding: 3px 10px
.cast-button
width: 100%
height: 29px
.autocast-delays
min-width: 0
li
a, .dropdown-menu-header
padding: 3px 15px
a.selected
font-weight: bold