// —————————————————————————- // Mixins // —————————————————————————- @mixin transition($transition-property, $transition-time, $method) {

-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;

}

// —————————————————————————- // Sass declarations // —————————————————————————- $background-color: #000000; $title-color: rgba(255, 255, 255, 0.7); $state-color: #FFFFFF; $message-color: rgba(255, 255, 255, 0.7); $updated-at-color: rgba(0, 0, 0, 0.3);

// —————————————————————————- // Widget-state styles // —————————————————————————- .widget-hot-state {

background-color: $background-color;
@include transition(background-color, 1s, linear);

.title {
  color: $title-color;
  margin-bottom: 10px;
}

.state {
  color: $state-color;
  font-size: 40px;
}

.message {
  color: $message-color;
  font-size: 18px;
}

.updated-at {
  color: $updated-at-color;
}

}

.hot-state-ok { background-color: #00C176; } .hot-state-warning { background-color: #FABE28; } .hot-state-critical { background-color: #FF003C; } .hot-state-unknown { background-color: #FF003C; }