dashing - app monitor

by Johan Vandeplas

HTML

<div class="widget">
  <h1>Ceres Development</h1>
<div class="container">
    <div class="item green"><div class="title">Frontend</div></div>
    <div class="item"><div class="title">Backend</div></div>
    <div class="item"><div class="title">DB</div></div>
    <div class="item"><div class="title">ES</div></div>
    <div class="item"><div class="title">Security FE</div></div>
    <div class="item"><div class="title">Security BE</div></div>
    <div class="item"><div class="title">Bits</div></div>
    <div class="item"><div class="title">Employee</div></div>
    <div class="item"><div class="title">Location</div></div>
    <div class="item"><div class="title">Document</div></div>
    <div class="item"><div class="title">Mail</div></div>
    <div class="item"><div class="title">Report</div></div>
    <div class="item"><div class="title">VP</div></div>
</div>
</div>

SCSS

$background-red-color: #d26771;
$background-yellow-color: #d2be35;
$background-green-color: #96bf48;
$background-unknown-color: #999;

h1 {
  margin: 3px;
}

.widget {
  display: inline-block;
  background-color: $background-unknown-color;
  &.red {
    background-color: $background-red-color;
  }
  &.green {
    background-color: $background-green-color;
  }
  &.yellow {
    background-color: $background-yellow-color;
  }
  
  .container {
    background-color: $background-yellow-color;
    width: 420px;
    .item {
      display: table;
      height: 60px;
      width: 60px;
      float: left;
      margin: 3px;
      background-color: $background-unknown-color;
      &.red {
        background-color: $background-red-color;
      }
      &.green {
        background-color: $background-green-color;
      }
      &.yellow {
        background-color: $background-yellow-color;
      }
      &.unknown {
        background-color: $background-unknown-color;
      }
      background: -webkit-radial-gradient(center, ellipse cover, transparent 0%, transparent 0%, rgba(0, 0, 0, 0.25) 205%, rgba(0, 0, 0, 1) 100%);
      .title {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font-size: 12px;
        font-family: monospace;
      }
    }
  }
}