dashing_list

alllist.coffee

class Dashing.Alllist extends Dashing.Widget
	onData: (data) ->
    @_checkStatus(data.widget_class)
 
  _checkStatus: (status) ->
    $(@node).removeClass('failed pending passed')
    $(@node).addClass(status)
  ready: ->
    if @get('unordered')
      $(@node).find('ol').remove()
    else
      $(@node).find('ul').remove()

alllist.html

<h1 class="title" data-bind="title" ></h1>

<ol>
  <li data-foreach-item="items">
    <span class="label1" data-bind="item.label"></span>
    <span class="value1 item.color" data-bind="item.value"></span>
  </li>
</ol>

<ul class="list-nostyle">
  <li data-foreach-item="items">
    <span class="label1" data-bind="item.label"></span>
		<span class="value1 item.color" data-bind="item.value"></span>
  </li>
</ul>

<p class="more-info" data-bind="moreinfo"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>

alllist.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:         #333;
$background-error-color:   #A31F1F;
$background-passed-color:  #FFA500;
$background-pending-color: #47bbb3;
$value-color:       #fff;

$title-color:       rgba(255, 255, 255, 0.7);
$title-color-error:       #333333;
$label-color:       rgba(255, 255, 255, 0.7);
$moreinfo-color:    rgba(255, 255, 255, 0.7);

// ----------------------------------------------------------------------------
// Widget-alllist styles
// ----------------------------------------------------------------------------
.widget-alllist {

  background-color: $background-color;
  vertical-align: top;
  color: $value-color;

//  .title {
//    color: $title-color;
// }

  ol, ul {
    margin: 0 15px;
    text-align: left;
//    color: $label-color;
  }

  ol {
    list-style-position: inside;
  }

  li {
    margin-bottom: 5px;
  }

  .list-nostyle {
    list-style: none;
  }

  .label1 {
//    color: $label-color;
			font-size: 20px;
  }


  .value1 {
    float: right;
    margin-left: 6px;
    font-weight: 900;
		font_size: 20px;
//    color: $value-color;
  }

/*  .updated-at {
    color: rgba(0, 0, 0, 0.3);
  }
*/

  .more-info {
    color: $moreinfo-color;
  }

  &.failed {
    background-color: $background-error-color;
//		color: $title-color-error;
  }
 
  &.pending {
    background-color: $background-pending-color;
//		color: $title-color-error;
  }
 
  &.passed {
    background-color: $background-passed-color;
//		color: $title-color-error;
  }	

}