conjur-asset-ui 1.3.0

data/public/css/styles.less

@@ -0,0 +1,461 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  font-family: Lato, sans-serif;
+}
+
+.timestamp {
+  white-space: nowrap;
+}
+
+.auditBox {
+  max-height: 350px;
+  overflow-y: scroll;
+  time {
+    float: right;
+    margin-right: 0.5em;
+  }
+}
+
+#nav-home a {
+  background-image: url('/images/conjur-logo.svg');
+  background-size: contain;
+  background-repeat: no-repeat;
+  padding-left: 12em;
+}
+
+thead {
+  border-bottom: #999999 thin solid;
+}
+
+th {
+  text-transform: capitalize;
+}
+
+th, td {
+  padding: 3pt 8pt;
+}
+
+caption {
+  color: #6d6d6d;
+  font-size: 1.6em;
+  margin-bottom: 0.6em;
+  letter-spacing: 0.2em;
+  text-transform: lowercase;
+}
+
+h2 {
+  font-size: 26px;
+}
+
+.no-icon {
+  background-image: none !important;
+  background-size: 0 !important;
+  background-position: default !important;
+}
+
+.group-icon(@size, @x-offset: 0.2em, @y-offset: 0.07em) {
+  background-image: url('/images/icon-person.svg'), url('/images/icon-person.svg');
+  background-repeat: no-repeat;
+  background-size: @size;
+  background-position: (-0.2 * @size + @x-offset) (-0.1 * @size + @y-offset), (0.2 * @size + @x-offset) (0.1 * @size + @y-offset);
+}
+
+.layer-icon(@size, @x-offset: 0.2em, @y-offset: 0.07em) {
+  background-image: url('/images/icon-client-pc.svg'), url('/images/icon-client-pc.svg');
+  background-repeat: no-repeat;
+  background-size: @size;
+  background-position: (-0.2 * @size + @x-offset) (-0.1 * @size + @y-offset), (0.2 * @size + @x-offset) (0.1 * @size + @y-offset);
+}
+
+.environment-icon(@size, @x-offset: 0.2em, @y-offset: 0.07em) {
+  background-image: url('/images/icon-key.svg'), url('/images/icon-key.svg');
+  background-repeat: no-repeat;
+  background-size: @size;
+  background-position: (-0.2 * @size + @x-offset) (-0.1 * @size + @y-offset), (0.2 * @size + @x-offset) (0.1 * @size + @y-offset);
+}
+
+.group h2, .groupsList tbody tr td.id {
+  .group-icon(2em);
+  padding-left: 2.5em;
+}
+
+.group h2 {
+  padding: 0.5em 2.5em;
+}
+
+dl {
+  font-size: 1.2em;
+  margin: 2em 1em;
+}
+
+dd {
+  /* top left bottom (I always forget that) */
+  margin: 0.3em 1.4em 1em;
+}
+
+.group {
+  ul {
+    padding-left: 0em;
+  }
+
+  li {
+    display: block;
+  }
+}
+
+dl.propertyList {
+  dt {
+    display: inline;
+    margin-left: 6px;
+    font-size: 14px;
+  }
+
+  dd {
+    display: inline;
+    margin-left: 6px;
+    font-size: 14px;
+  }
+}
+
+.namespaceList {
+  float: right;
+
+  h2, div {
+    font-size: 1em;
+    display: inline;
+    margin: 0.5em;
+    color: #2d2d2d;
+  }
+
+  select {
+    background: white;
+    border: #ddd solid thin;
+    border-radius: 0.5em;
+    color: #2d2d2d;
+  }
+}
+
+.role-link-padding {
+  padding-left: 1.7em;
+}
+
+.asset-link-icon(@icon, @size: 1.6em) {
+  .role-link-padding;
+
+  background-image: url(@icon);
+  background-size: @size;
+  background-repeat: no-repeat;
+}
+
+.variable.resource-link {
+  .asset-link-icon('/images/icon-variable.png', 0.8em);
+}
+
+.environment.resource-link {
+  .asset-link-icon('/images/icon-environment.png', 1.1em);
+}
+
+.environment-variables.resource-link {
+  .asset-link-icon('/images/icon-environment.png', 1.1em);
+}
+
+.host.role-link, .host.resource-link {
+  .asset-link-icon('/images/icon-client-pc.svg');
+  background-position-y: -0.1em;
+}
+
+.policy.role-link, .policy.resource-link {
+  .asset-link-icon('/images/icon-policy.png', 1.4em);
+  background-position-y: -0.1em;
+}
+
+.abstract.resource-link {
+  .asset-link-icon('/images/icon-resource.png',1.4em);
+  background-position-y: -0.1em;
+}
+
+.user.role-link, .user.resource-link {
+  .asset-link-icon('/images/icon-person.svg');
+  background-position-y: -0.2em;
+}
+
+.pubkeysUser .list-group-item {
+  max-width: 300px;
+}
+
+.group.role-link, .group.resource-link {
+  .role-link-padding;
+  .group-icon(1.2em);
+}
+
+.layer.role-link, .layer.resource-link {
+  .role-link-padding;
+  .layer-icon(1.2em);
+}
+
+.auditBox {
+  th.when {
+      width: 129px;
+  }
+}
+
+.search-button {
+  margin-left: 0.5em;
+}
+
+
+.dashboard {
+  #dashboard-search {
+    margin: 4em auto;
+  }
+
+  .owned ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  .owned .hide-all { display: none; }
+
+  .owned li {
+    list-style-type: none;
+    padding: 3pt 8pt;
+  }
+}
+
+.dashboard form.search, #searchResults form.search {
+  margin: 0px auto;
+  width: 300px;
+}
+
+.search-group {
+  .panel-heading {
+    a:after {
+      font-family: 'Glyphicons Halflings';
+      content: "\e114";
+      float: right;
+      color: grey;
+    }
+
+    a.collapsed:after {
+      content: "\e080";
+    }
+  }
+}
+
+.search-results {
+  .item {
+    h4 {
+      margin-bottom: 4px;
+    }
+
+    .details {
+      font-size: 12px;
+    }
+
+    .comment {
+      font-size: 14px;
+    }
+  }
+}
+
+.searchResults .toc-item {
+  display: inline-block;
+  margin: 5px;
+}
+
+.searchResults h3 {
+  margin: 5px 0 0 4px;
+}
+
+.list-group-item-noborder {
+  border: 0;
+}
+
+// Conjur color palette.
+//
+// Styleguide 2.0.
+@turquoise: #00b49d;
+@light-blue: #99b8c7;
+@dark-blue: #49585f;
+
+// Highlight color: a bright color to bring attention to changes and interaction possibilities.
+//
+// Styleguide 2.1.
+@highlight-color: @turquoise;
+
+// Content color: a basic content color.
+//
+// Styleguide 2.2.
+@content-color: darken(@light-blue, 80%);
+
+// Background color: a dark color to serve as ambient background.
+//
+// Styleguide 2.3.
+@background-color: lighten(@dark-blue, 90%);
+
+// Basic body settings.
+//
+// Styleguide 1.0.
+body {
+  font-family: Lato, sans-serif;
+  background: @background-color;
+  color: @content-color;
+  font-size: 12pt;
+
+  a {
+    color: darken(@highlight-color, 5%);
+
+    &:hover {
+      color: darken(@highlight-color, 10%);
+    }
+  }
+
+  h2 {
+    letter-spacing: 0.1em;
+    margin-top: 0;
+    font-weight: 300;
+  }
+
+  h3 {
+    margin: 1em 0 1em;
+    letter-spacing: 0.01em;
+    font-weight: 300;
+  }
+
+  dl {
+    //display: flex;  // sorry, this squashes whole string
+    position: relative;
+    padding-top: 1.5em;
+
+    dt {
+      font-weight: 300;
+    }
+
+    dd {
+      margin: 0 0 5px 0;
+    }
+  }
+}
+
+// Section describing permissions held by a particular role.
+//
+// .loading - Indicates that the section has not loaded yet.
+//
+// Styleguide 1.1.
+section.permissions {
+}
+
+// The topmost content container.
+//
+// Styleguide 1.2.
+#content {
+  margin: 0 3em;
+  min-height: 500px;
+}
+
+// Search results.
+//
+// Styleguide 1.3.
+.search-results {
+  color: darken(@content-color, 30%);
+
+  a {
+    color: darken(@highlight-color, 50%);
+  }
+}
+
+// Pacer: a loading progress and activity indicator.
+//
+// @pace-color - Color of the progress bar.
+//
+// Styleguide 3.
+@pace-color: @highlight-color;
+
+.pace-inactive {
+  display: none;
+}
+
+.pace {
+  -webkit-pointer-events: none;
+  pointer-events: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+
+  .pace-progress {
+    background: @pace-color;
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    left: 0;
+    height: 2px;
+
+    -webkit-transition: width 1s;
+    -moz-transition: width 1s;
+    -o-transition: width 1s;
+    transition: width 1s;
+  }
+
+  .pace-progress-inner {
+    display: block;
+    position: absolute;
+    right: 0px;
+    width: 100px;
+    height: 100%;
+    box-shadow: 0 0 10px @pace-color, 0 0 5px @pace-color;
+    opacity: 1.0;
+    -webkit-transform: rotate(3deg) translate(0px, -4px);
+    -moz-transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    -o-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
+  }
+
+  .pace-activity {
+    background-image: url('/images/icon-service-dots.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: right center;
+    display: block;
+    position: fixed;
+    z-index: 2000;
+    top: 5px;
+    right: 5px;
+    width: 70px;
+    height: 70px;
+    -webkit-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    -moz-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    -ms-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    -o-animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+    animation: pace-pulse 1s alternate infinite none cubic-bezier(1, 0, 0.73, 1);
+  }
+}
+
+@-webkit-keyframes pace-pulse {
+  0% { -webkit-transform: scale(1); }
+  100% { -webkit-transform: scale(0.8); }
+}
+
+@keyframes pace-pulse {
+  0% { transform: scale(1); }
+  100% { transform: scale(0.8); }
+}
+
+.header {
+    font-size: 12px;
+    padding-left: 10px;
+}
+
+.tab-pane {
+    padding-top: 5px;
+}