1 files changed, 363 insertions, 0 deletions
diff --git a/public/css/icinga/audit.less b/public/css/icinga/audit.less
new file mode 100644
index 0000000..23ab5b9
--- /dev/null
+++ b/public/css/icinga/audit.less
@@ -0,0 +1,363 @@
+// Style
+
+.privilege-audit-role-control {
+  list-style-type: none;
+
+  li {
+    .rounded-corners(3px);
+    border: 1px solid;
+    border-color: @low-sat-blue;
+
+    &.active {
+      border-color: @icinga-blue;
+    }
+  }
+}
+
+.privilege-audit {
+  &, ul, ol {
+    list-style-type: none;
+  }
+
+  .privilege-section > summary {
+    font-weight: @font-weight-bold;
+    border-bottom: 1px solid @gray-light;
+  }
+
+  .privilege-section > summary em,
+  .previews em,
+  .privilege-label em {
+    color: @text-color-light;
+  }
+  .privilege-section > summary em {
+    font-weight: normal;
+  }
+  .privilege-label em {
+    font-style: normal;
+  }
+
+  .icon {
+    color: @gray-light;
+
+    &.granted {
+      color: @color-granted;
+    }
+
+    &.refused {
+      color: @color-refused;
+    }
+
+    &.restricted {
+      color: @color-restricted;
+    }
+  }
+
+  .privilege-list > li {
+    .spacer {
+      opacity: 0;
+      .transition(opacity .5s ease-out);
+    }
+
+    &:hover .spacer {
+      .transition(opacity .25s .25s ease-in);
+      border: 0 dashed;
+      border-color: @gray-light;
+      border-top-width: .2em;
+      opacity: 1;
+    }
+  }
+
+  .vertical-line {
+    border: 0 solid;
+    border-left-width: 2px;
+
+    &.granted {
+      border-color: @color-granted;
+    }
+
+    &.refused {
+      border-color: @color-refused;
+    }
+  }
+
+  .connector {
+    border: 0 solid;
+    border-color: @gray-lighter;
+    border-bottom-width: 2px;
+
+    &.granted {
+      border-color: @color-granted;
+    }
+
+    &.refused {
+      border-color: @color-refused;
+    }
+
+    &:first-child {
+      border-width: 0 0 2px 2px;
+      border-bottom-left-radius: .5em;
+    }
+  }
+
+  .role {
+    .rounded-corners(1em);
+    border: 2px solid;
+    border-color: @gray-lighter;
+
+    &.granted {
+      border: 2px solid;
+      border-color: @color-granted;
+    }
+
+    &.refused {
+      border: 2px solid;
+      border-color: @color-refused;
+    }
+  }
+
+  .restriction {
+    font-family: @font-family-fixed;
+    background-color: @gray-lighter;
+  }
+}
+
+// Layout
+
+.privilege-audit-role-control {
+  display: inline-flex;
+  flex-wrap: wrap;
+
+  margin: 0 0 0 1em;
+  padding: 0;
+
+  li {
+    margin-top: @vertical-padding;
+
+    &:not(:first-child) {
+      margin-left: .5em;
+    }
+  }
+}
+
+.privilege-audit {
+  &, ul, ol {
+    margin: 0;
+    padding: 0;
+  }
+
+  .flex-overflow,
+  .privilege-list > li,
+  .inheritance-paths > ol {
+    display: flex;
+  }
+
+  .privilege-list > li {
+    margin-top: 1em;
+
+    > :last-child {
+      // This aids the usage of text-overflow:ellipsis in any of the children.
+      // It seems that to get this working while none of the children has a
+      // defined width, any flex item on the way up to the clipped container
+      // also must have a overflow value of "hidden".
+      // https://codepen.io/unthinkingly/pen/XMwJLG
+      overflow: hidden;
+    }
+
+    > details:last-child {
+      // The overflow above cuts off the outline of the summary otherwise
+      margin: -4px;
+      padding: 4px;
+    }
+  }
+
+  .privilege-section {
+    &:not(.collapsed) {
+      margin-bottom: 2em;
+    }
+  }
+
+  .privilege-section > summary {
+    display: flex;
+    align-items: baseline;
+    font-size: 1.167em;
+    margin: 0.556em 0 0.333em;
+
+    > :first-child {
+      flex: 3 1 auto;
+      min-width: 20em;
+      max-width: 40em / 1.167em; // privilege label width + spacer width / summary font-size
+    }
+
+    .audit-preview {
+      flex: 1 1 auto;
+
+      .icon:before {
+        width: 1.25em;
+        font-size: 1.25em / 1.167em; // privilege state icon font-size / summary font-size
+      }
+    }
+
+    em {
+      font-size: .857em;
+    }
+  }
+
+  h4,
+  .privilege-label {
+    flex-shrink: 0;
+    width: 20em;
+    margin: 0;
+    text-align: right;
+  }
+
+  ol + h4 {
+    margin-top: 1em;
+  }
+
+  .spacer {
+    flex: 20 1 auto;
+    min-width: 10em; // TODO: Mobile?
+    max-width: 18.8em; // 20em - (margin-left + margin-right)
+    margin: .6em;
+  }
+
+  .inheritance-paths,
+  .restrictions {
+    flex: 1 1 auto;
+
+    > summary {
+      line-height: 1;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+
+      > .icon:before {
+        width: 1.25em;
+        font-size: 1.25em;
+      }
+    }
+  }
+
+  .vertical-line {
+    margin-left: ~"calc(.75em - 1px)";
+  }
+
+  .connector {
+    flex: 1 1 auto;
+    width: 2em;
+    max-width: 2em;
+    min-width: 1em;
+    margin-bottom: ~"calc(1em - 1px)";
+
+    &:first-child {
+      margin-left: ~"calc(.75em - 1px)";
+    }
+
+    &.initiator {
+      z-index: 1;
+      margin-right: ~"calc(-.25em - 2px)";
+    }
+  }
+
+  .vertical-line + .connector {
+    min-width: ~"calc(.75em - 2px)";
+    width: ~"calc(.75em - 2px)";
+    flex-grow: 0;
+
+    &.initiator {
+      width: ~"calc(1em - 1px)";
+    }
+  }
+  .connector:first-child {
+    min-width: .75em;
+    width: .75em;
+    flex-grow: 0;
+
+    &.initiator {
+      width: 1em;
+    }
+  }
+
+  .role {
+    padding: .25em .5em .25em .5em;
+    line-height: 1;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    .icon:before {
+      font-size: 1.25em;
+    }
+  }
+  .inheritance-paths .role {
+    min-width: 4em;
+    margin-top: .5em;
+    padding-left: .25em;
+  }
+  .restrictions .role {
+    display: inline-block;
+  }
+
+  .previews {
+    display: flex;
+    margin-top: .25em;
+
+    em {
+      // explicit margin + ((header icon width + its margin right) * 125% font-size)
+      margin: 0 1em 0 1em + ((1.25em + .2em) * 1.25em);
+    }
+  }
+
+  .links li:not(:last-child):after {
+    content: ",";
+  }
+
+  .restrictions > ul > li {
+    margin-top: .5em;
+
+    .role {
+      margin-left: 1.25em + .2em * 1.25em; // (header icon width + its margin right) * 125% font-size
+      margin-right: 1em;
+    }
+  }
+
+  .restriction {
+    font-size: .8em;
+    padding: .335em / .8em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    .user-select(all);
+  }
+}
+
+#layout.minimal-layout,
+#layout.poor-layout {
+  .privilege-audit {
+    .privilege-section > summary > :first-child {
+      flex-grow: 99;
+    }
+
+    h4,
+    .privilege-label {
+      width: 12em;
+    }
+
+    .spacer {
+      flex: 0;
+      min-width: 0;
+    }
+  }
+}
+
+// Integrations
+
+.privilege-audit .collapsible {
+  .collapsible-control {
+    cursor: pointer;
+    .user-select(none);
+  }
+}