conjur-asset-ui-beta 1.5.0

data/app/src/styles/bootstrap.less

@@ -0,0 +1,56 @@
+// =============================================================================
+// Bootstrap CSS + Custom styles and overrides
+// =============================================================================
+
+// Core variables and mixins
+@import "../../node_modules/bootstrap/less/variables.less";
+@import "../../node_modules/bootstrap/less/mixins.less";
+
+// Reset and dependencies
+@import "../../node_modules/bootstrap/less/normalize.less";
+@import "../../node_modules/bootstrap/less/print.less";
+@import "../../node_modules/bootstrap/less/glyphicons.less";
+
+// Core CSS
+@import "../../node_modules/bootstrap/less/scaffolding.less";
+@import "../../node_modules/bootstrap/less/type.less";
+@import "../../node_modules/bootstrap/less/code.less";
+@import "../../node_modules/bootstrap/less/grid.less";
+@import "../../node_modules/bootstrap/less/tables.less";
+@import "../../node_modules/bootstrap/less/forms.less";
+@import "../../node_modules/bootstrap/less/buttons.less";
+
+// Components
+@import "../../node_modules/bootstrap/less/component-animations.less";
+@import "../../node_modules/bootstrap/less/dropdowns.less";
+@import "../../node_modules/bootstrap/less/button-groups.less";
+@import "../../node_modules/bootstrap/less/input-groups.less";
+@import "../../node_modules/bootstrap/less/navs.less";
+@import "../../node_modules/bootstrap/less/navbar.less";
+@import "../../node_modules/bootstrap/less/breadcrumbs.less";
+@import "../../node_modules/bootstrap/less/pagination.less";
+@import "../../node_modules/bootstrap/less/pager.less";
+@import "../../node_modules/bootstrap/less/labels.less";
+@import "../../node_modules/bootstrap/less/badges.less";
+@import "../../node_modules/bootstrap/less/jumbotron.less";
+@import "../../node_modules/bootstrap/less/thumbnails.less";
+@import "../../node_modules/bootstrap/less/alerts.less";
+@import "../../node_modules/bootstrap/less/progress-bars.less";
+@import "../../node_modules/bootstrap/less/media.less";
+@import "../../node_modules/bootstrap/less/list-group.less";
+@import "../../node_modules/bootstrap/less/panels.less";
+@import "../../node_modules/bootstrap/less/responsive-embed.less";
+@import "../../node_modules/bootstrap/less/wells.less";
+@import "../../node_modules/bootstrap/less/close.less";
+
+// Components w/ JavaScript
+@import "../../node_modules/bootstrap/less/modals.less";
+@import "../../node_modules/bootstrap/less/tooltip.less";
+@import "../../node_modules/bootstrap/less/popovers.less";
+@import "../../node_modules/bootstrap/less/carousel.less";
+
+// Utility classes
+@import "../../node_modules/bootstrap/less/utilities.less";
+@import "../../node_modules/bootstrap/less/responsive-utilities.less";
+
+@import "styles.less";

data/app/src/styles/styles.less

@@ -0,0 +1,634 @@
+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;
+  }
+}
+
+
+.navbar-brand {
+    background-image: url('/images/conjur-logo.svg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 137px;
+    margin-left: -9px !important;
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#bottom {
+    margin-top: 25px;
+}
+
+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;
+}
+
+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;
+}
+
+.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 {
+    dt {
+        font-weight: 300;
+    }
+
+    dd {
+        margin: 0 0 5px 0;
+    }
+}
+
+.dl-horizontal {
+    dt {
+        width: 100px !important;
+    }
+
+    dd {
+        margin-left: 120px !important;
+    }
+}
+
+// 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 {
+    -webkit-pointer-events: none;
+    pointer-events: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+}
+
+.pace-inactive {
+    display: none;
+}
+
+.pace .pace-progress {
+    background: @pace-color;
+    position: fixed;
+    z-index: 2000;
+    top: 0;
+    right: 100%;
+    width: 100%;
+    height: 2px;
+}
+
+.pace .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 .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;
+}
+
+.b-dashboard-activity__graph {
+    height: 300px;
+}
+
+/* ---------------------------------- */
+/* -Variables------------------------ */
+
+.b-breadcrumb {
+
+}
+
+.b-breadcrumb__extra {
+    color: gray;
+    font-size: 12px;
+    padding-left: 10px;
+}
+
+.b-breadcrumb__extra:before {
+    content: "" !important;
+}
+
+.b-breadcrumbs .breadcrumb>li+li:before {
+    content: "\2794";
+}
+
+.b-breadcrumbs {
+
+}
+
+.b-variable-activity {
+
+}
+
+.b-variable-activity__graph {
+    height: 300px;
+}
+
+.b-variable-updaters {
+    border-right: 1px solid #eee;
+}
+
+.b-variable-fetchers {
+
+}
+
+.b-variable-details {
+    border-right: 1px solid #eee;
+}
+
+/* * * * */
+
+.b-audit-section {
+
+}
+
+.b-audit-section__list {
+
+}
+
+.b-audit-section__item {
+
+}
+
+.b-audit-section__toggle {
+
+}
+
+/* * * * */
+
+.revealer {
+  cursor: pointer;
+}
+
+.b-user-activity {
+
+}
+
+.b-user-activity__graph {
+    height: 300px;
+}
+
+.b-host-activity {
+
+}
+
+.b-host-activity__graph {
+    height: 300px;
+}
+
+
+/* ------------------------------------------------ */
+/* Chart */
+
+.b-chart {
+    height: 100%;
+}
+
+/* Line Chart */
+
+.d3-line-chart {
+    font: 10px sans-serif;
+}
+
+.d3-line-chart__inner {
+
+}
+
+/* Axises */
+
+.d3-axis {
+
+}
+
+.d3-axis__x line,
+.d3-axis__x path {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+.d3-axis__y line,
+.d3-axis__y path {
+    fill: none;
+    stroke: #000;
+    shape-rendering: crispEdges;
+}
+
+/* Legend */
+
+.d3-legend {
+
+}
+
+.d3-legend__item {
+
+}
+
+.d3-legend__item:hover {
+    cursor: pointer;
+}
+
+/* Graph */
+
+.d3-graph {
+
+}
+
+.d3-graph__line {
+
+}
+
+.d3-graph__line path {
+    fill: none;
+    stroke: steelblue;
+    stroke-width: 1.5px;
+}
+
+.d3-graph__focus {
+
+}
+
+.d3-graph__focus circle {
+    fill: none;
+    stroke: steelblue;
+}
+
+.d3-graph__overlay {
+    fill: none;
+    pointer-events: all;
+}