shopify/Dashing workshop coffeescript syntax issue - dashing

Question

i am currently working on a project which is taking an active check feed from Nagios Check_mk and displaying on a text widget. i am trying to get the widget to change colour, working through the workshop page i am stuck with the coffee script, it doesn't appear to have any effect when the value is changed. here is what i have
alert.coffee
class Dashing.Alert extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with #node
# Example: $(#node).fadeOut().fadeIn() will make the node flash each time data comes in.
#accessor 'value', Dashing.AnimatedValue
#accessor 'isTooHigh', ->
#get('value') > 200
alert scss
.widget-alert {
background: #00ff99;
font-size: 65px;
font-weight: bold;
}
.danger {
background: #ff1a00;
}
all other files are exactly as detailed in the workshop page: any help greatly appreciated.

Answer 1

Basically the change of color or animated flashing of color was handled by the scss #keyframe rule, you must bind it to a selector, otherwise the animation will have no effect
Here's some example
$background-alert-color-1: #FFFF66;
$background-alert-color-2: #FF9618;
$text-alert-color: #fff;
#-webkit-keyframes status-alert-background {
0% { background-color: $background-alert-color-1; }
50% { background-color: $background-alert-color-2; }
100% { background-color: $background-alert-color-1; }
}
.widget.status-alert {
color: $text-alert-color;
background-color: $background-alert-color-1;
#include animation(status-alert-background, 2s, ease, infinite);
.icon-alert-sign {
display: inline-block;
}
.title, .more-info {
color: $text-alert-color;
}
For some example and reference (also for the coffescript) you can check this one dashing_zabbix