// —————————————————————————- // 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; }