fixed theming

static/dashboard/img/dashboard/scss/_bootstrap_helpers.scss

@@ -0,0 +1,56 @@
+// Bootstrap Helpers
+
+// Some values in Bootstrap are hardcoded, but it would be
+// useful to use their values in some calculations
+
+$bs-button-vertical-border: 2;              // _buttons.scss:18
+
+$bs-dropdown-item-padding-vertical:   3px;  // _dropdowns.scss:67
+$bs-dropdown-item-padding-horizontal: 20px; // _dropdowns.scss:67
+
+$bs-modal-margin: 30px;                     // _modals.scss:138
+$bs-modal-margin-small-screen: 10px;        // _modals.scss:47
+$bs-modal-footer-vertical-border: 1;        // _modals.scss:106
+
+
+// Some custom Modal sizes used to create two additional modal sizes: xs & xl
+$modal-xs: $modal-sm;
+$modal-xl: 95vw;
+
+
+// Some Helpful Calculations
+$bs-button-height: ($font-size-base * $line-height-base) + $padding-base-vertical*2 + $bs-button-vertical-border;
+
+// The height of a standard modal header with an H3 sized title
+$bs-modal-header-height: $modal-title-padding*2 + ($font-size-h3 * $line-height-base);
+
+// The height of a standard modal footer with a single row of buttons
+$bs-modal-footer-height: $modal-inner-padding*2 + $bs-button-height + $bs-modal-footer-vertical-border;
+
+// The height of the modal w/o taking its contents into account
+$bs-modal-height: $bs-modal-margin*2 + $bs-modal-header-height + $bs-modal-footer-height;
+$bs-modal-height-small-screen: $bs-modal-margin-small-screen*2 + $bs-modal-header-height + $bs-modal-footer-height;
+
+
+// Missing Vendor Prefix Mixins
+
+// keyframes
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content;
+  }
+  @-moz-keyframes #{$name} {
+    @content;
+  }
+  @-ms-keyframes #{$name} {
+    @content;
+  }
+  @keyframes #{$name} {
+    @content;
+  }
+}
+
+// Ensures that linked components will have the correct cursor without href attributes.
+// If ng-disabled this will be overridden by cursor: not-allowed.
+// https://angular-ui.github.io/bootstrap/
+.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

static/dashboard/img/dashboard/scss/_contrib.scss

@@ -0,0 +1,10 @@
+/* The styles in this file will be moved out to their contrib
+   directories or deprecated entirely. */
+
+/* Used to build compact node groups and tags tables */
+
+.small-padding {
+  padding-left: 0;
+  padding-right: $padding-small-vertical;
+  padding-bottom: $padding-small-vertical;
+}

static/dashboard/img/dashboard/scss/_debt.scss

@@ -0,0 +1,102 @@
+/* The styles in this file need to be researched and/or removed when possible */
+
+#usage {
+  margin-bottom: 25px;
+  height: 125px;
+}
+
+ul {
+  margin: 0;
+}
+
+// should be removed and replaced by row + col-sm-6 in template
+.left, .right {
+  @extend .col-sm-6;
+}
+
+.dynamic-error {
+  background: $body-bg;
+  border: 1px solid $border-color;
+  color: $brand-danger;
+  margin-bottom: 0.5em;
+}
+
+iframe {
+  border: none;
+}
+
+.progress_bar {
+  height: 100%;
+  width: 100%;
+  border: 1px solid $gray-light;
+  background-color: $gray-light;
+}
+
+.progress_bar_fill,
+.progress_bar_selected {
+  height: 100%;
+  float: left;
+}
+
+.progress_bar_fill {
+  background-color: $gray;
+}
+
+.progress_bar_selected {
+  background-color: $brand-primary;
+  width: 0;
+}
+
+.progress_bar_over {
+  background-color: $brand-danger;
+}
+
+/* ============ */
+/* Known issues */
+/* ============ */
+
+/* Tables */
+/* This works around a known bug in Bootstrap, the
+   wrapping of button groups within the cell of a table:
+       https://github.com/twbs/bootstrap/issues/3130
+*/
+td .btn-group {
+  white-space: nowrap;
+
+  // We want the actions column to be a small button, but
+  // we can't get to the class attribute yet to customize
+  // that outside of every action, including table header
+  .btn {
+    @extend .btn-sm;
+  }
+
+  & > .btn-group,
+  & > .btn {
+    float: none;
+  }
+}
+
+/* Note: (hurgleburgler) this issue is closed. This might be fixed.
+/* Fix tooltip z-index to show above modals. Bootstrap bug 582*/
+.tooltip {
+  z-index: 12000;
+  word-wrap: break-word;
+}
+
+/*
+Hack to allow a <div> to be wrapped around a disabled element that
+needs to have a tooltip. The disabled element won't allow a JS tooltip
+to receive events, so we wrap it in another tag. For some reason a
+<span> also doesn't receive the events, but a <div> does. We set
+display to inline-block so that existing formatting is unaffected.
+*/
+div.tooltip-hack {
+  display: inline-block;
+}
+
+/*
+Rickshaw graphs don't grow their detail box appropriately
+*/
+.rickshaw_graph .detail .item {
+  width: auto;
+}

static/dashboard/img/dashboard/scss/_layout.scss

@@ -0,0 +1,32 @@
+// Make the sidebar span the entire page, instead of just the Viewport
+// Display Table is not ideal, but it will allow dynamic resizing of
+// the sidebar while growing its container to fill the entire window
+html,
+body:not(#splash) {
+  height: 100%;
+}
+
+// Theme Note:
+// The following 1px is the default 1px for nav border in Bootstrap. If
+// this value is customized, then this value must change to compensate
+$navbar-border-size: 1px !default;
+$navbar-true-height: $navbar-height + $navbar-border-size !default;
+
+#main_content {
+  padding-top: $navbar-true-height;
+}
+
+#sidebar {
+  float: left;
+}
+
+// Always show the side nav on larger screens
+@media(min-width: $screen-sm-min) {
+  #content_body {
+    padding-left: $sidebar-width;
+  }
+}
+
+.page-header {
+  margin-top: $padding-base-horizontal;
+}

static/dashboard/img/dashboard/scss/_legacy.scss

@@ -0,0 +1,148 @@
+/* Styles that are around for legacy purposes.
+   If you are using any of these style, please reconsider.
+   If you need to add styles to this file, please add
+   comments explaining the legacy nature of the style */
+
+/* Main Nav is not used any longer by Horizon, but may still
+   be used by others to obtain a horizontal nav experience. */
+
+/* Note (hurgleburgler): We should remove this when we have
+   implemented a global nav experience that has been reviewed
+   and accepted by UX.  We should only support a single nav. */
+.main_nav {
+  list-style: none;
+  width: 222px;
+  margin: 10px 0 20px 0;
+
+  a {
+    color: #999;
+    width: 185px;
+    padding: 10px;
+    display: block;
+    margin-left: 20px;
+
+    &.active {
+      background: #fff;
+      border: 2px solid #d8d8d8;
+      border-right: 0;
+      border-bottom-color: #ccc;
+    }
+  }
+}
+
+#create_keypair_modal .clearfix {
+  margin-bottom: 115px;
+}
+
+#actions {
+  width: 90px;
+
+  .btn {
+    margin-bottom: 5px;
+  }
+  a.btn {
+    width: 70px;
+  }
+
+  input.btn {
+    text-align: left;
+  }
+}
+#images #actions {
+  width: 100px;
+}
+
+// Note (hurgleburgler) I can't find this anywhere, but it might be dynamic.  More searching required.
+.progress-success.bar {
+  background-color: #5eb95e;
+  background-image: -moz-linear-gradient(top, #62c462, #57a957);
+  background-image: -ms-linear-gradient(top, #62c462, #57a957);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#57a957));
+  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
+  background-image: -o-linear-gradient(top, #62c462, #57a957);
+  background-image: linear-gradient(top, #62c462, #57a957);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
+}
+
+.progress_bar_fill.progress-warning.bar {
+  background-color: #898989;
+  background-image: -moz-linear-gradient(top, #999999, #333333);
+  background-image: -ms-linear-gradient(top, #999999, #333333);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#999999), to(#333333));
+  background-image: -webkit-linear-gradient(top, #999999, #333333);
+  background-image: -o-linear-gradient(top, #999999, #333333);
+  background-image: linear-gradient(top, #999999, #333333);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#333333', GradientType=0);
+}
+
+.progress_bar_over.bar {
+  background-color: #dd514c;
+  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#c43c35));
+  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
+  background-image: linear-gradient(top, #ee5f5b, #c43c35);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
+}
+
+.warning {
+  background-color: $body-bg;
+  border-bottom: 1px solid $brand-danger;
+  padding: 5px 10px;
+  .warning-text {
+    text-align: center;
+    h3, a {
+      display: inline-block;
+    }
+    h3 {
+      vertical-align: bottom;
+    }
+  }
+}
+
+#add_member {
+  clear: both;
+}
+
+.add_member {
+  float: right;
+  margin-top: 10px;
+  margin-right: 15px;
+}
+
+// See admin/metadata_defs --> Update Associations
+// Note (hurgleburgler) Was this ever working?  resource-types and membership are in the same class name
+.resource-types  {
+  .membership {
+    li .scope {
+      background: none;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+
+    li .select_resource {
+      margin-left: 5px;
+      margin-top: 15px;
+    }
+
+    li .display_name {
+      width: 130px;
+      margin-left: 10px;
+      margin-top: 15px;
+      margin-bottom: 15px;
+    }
+  }
+}
+
+/* Fixes overflow on dropdowns in modal */
+.dropdown_fix {
+  overflow: visible;
+}
+
+.zero_padding{
+  padding: 0px;
+}