CSS: Add crontab widget rules

asset/css/crontab.less

@@ -0,0 +1,129 @@
+// Cron tab expression widget
+
+.crontab-occurrence {
+  line-height: 1.1em;
+  margin: 0 1em 0 14em;
+
+  p {
+    color: @disabled-gray;
+  }
+}
+
+form.icinga-form .control-group.crontab-wrapper, .monthly-annually-selector {
+  margin-bottom: 0;
+}
+
+form.icinga-form .control-group.crontab-wrapper {
+  margin-top: -1em;
+}
+
+form.icinga-form .crontab {
+  flex: 2;
+
+  .crontab-number-specifier, .weekly, .monthly-annually-selector {
+    align-items: center;
+
+    .monthly, .annually, .ordinal {
+      margin-left: 14em;
+      list-style: none;
+    }
+
+    .radio-label {
+      width: 100%;
+      margin-bottom: .5em;
+      display: flex;
+      align-items: center; // To center the radio element on safari
+    }
+  }
+
+  .weekly ul, .control-group.crontab-number-specifier {
+    margin-left: 14em;
+  }
+
+  .crontab-number-specifier {
+    > * {
+      flex: 1;
+    }
+
+    span:first-of-type {
+      flex: 0;
+    }
+
+    input {
+      max-width: 5em;
+    }
+  }
+
+  ul {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    width: 100%;
+
+    li:hover {
+      background-color: @tr-hover-color;
+    }
+
+    input[type="checkbox"]:checked + li {
+      background-color: @icinga-blue;
+      color: @white;
+    }
+
+    li {
+      cursor: pointer;
+      display: inline-block;
+      width: 14.28%;
+      text-align: center;
+      padding: .8em 1em .8em 1em;
+      color: @icinga-blue;
+      background: @low-sat-blue;
+      border-right: .1em solid @gray-light;
+
+      span {
+        line-height: 1.1em;
+        padding: 0;
+      }
+    }
+  }
+
+  .weekly ul, .monthly ul {
+    label:nth-child(7n + 1) li, label:first-of-type li {
+      border-radius: .4em 0 0 .4em;
+    }
+
+    label:nth-child(7n) li, label:last-of-type li {
+      border-right: none;
+      border-radius: 0 .4em .4em 0;
+    }
+  }
+
+  .annually ul {
+    label:nth-child(4n + 1) li {
+      border-radius: .4em 0 0 .4em;
+    }
+
+    label:nth-child(4n) li {
+      border-right: none;
+      border-radius: 0 .4em .4em 0;
+    }
+  }
+
+  .annually li {
+    width: 25%; // 100% / 4 elements
+  }
+
+  .monthly, .annually, .ordinal {
+    padding: .4em;
+    margin-right: 1em;
+    border: .1em solid @gray-light;
+    .rounded-corners(.6em);
+
+    li {
+      margin-bottom: .08em;
+    }
+
+    > *:not(select:first-of-type) {
+      margin-right: 0;
+    }
+  }
+}