open-consul/ui/styles/base.scss

@import "mixins";
@import "variables";
@import "type";
@import "panels";
@import "nav";
@import "buttons";
@import "lists";
@import "forms";
@import "notifications";
@import "v2-notification";

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
  height: 60px; /* .push must be the same height as .footer */
}

@media (min-width: 1120px) { // + 30
  .container {
    width: 1100px;
  }
}

@media (min-width: 1200px) { // + 30
  .container {
    width: 1200px;
  }
}

@media (min-width: 1438px) { // + 38
  .container {
    width: 1400px;
  }
}

a {
    button:active {
        outline: none;
    }
}

.buffer-small {
  height: 50px;
}

@media (min-width: 991px) {
  .border-left {
    border-left: 1px $gray-background solid;
    .padded-border{
      padding-left: 30px;
    }
  }
}
.padded-right-middle {
  padding-right: 30px;
}

.no-margin {
    margin: 0;
}

.vertical-center {
    margin-top: 200px;
}

.sticky-scroll {
    top: 15px;
    position: sticky;
    position: -webkit-sticky;
    overflow: scroll;
}

.row {
    &.colored {
        background-color: $light-pink;
    }
}

.bordered {
    border-left: 2px solid $gray-background;
}


.bg-pink {
    background-color: $pink;
}

.bg-light-pink {
    background-color: $light-pink;
}

.bg-orange {
    background-color: $orange-faded;
}

.bg-green {
    background-color: $green-faded;
}

.bg-dark-green {
    background-color: $green-dark;
}

.bg-red {
    background-color: $red-faded;
}

.bg-gray {
    background-color: $gray-light;
}

.bg-light-gray {
    background-color: $gray-background;
}

.action-bar {
  min-height: 50px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.ember-list-view {
  overflow: auto;
  position: relative;
  margin-bottom: 30px;
}

.ember-list-item-view {
  position: absolute;
  width: 100%;
}

.scrollable {
  overflow: auto;
  height: 800px;
  margin-bottom: 30px;
}

.elip-overflow {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.do-logo {
  opacity: 0.6;
  margin-top: -3px;
}

.tomography .background {
    fill: $gray-background;
}
.tomography .axis {
    fill: none;
    stroke: $gray-light;
    stroke-dasharray: 4 4;
}
.tomography .border {
    fill: none;
    stroke: $gray-darker;
}
.tomography .point {
    stroke: $gray-darker;
    fill: $green-faded;
}
.tomography .lines line {
    stroke: $red;
}
.tomography .lines line:hover {
    stroke: $gray-darker;
    stroke-width: 2px;
}
.tomography .tick line {
    stroke: $gray-light;
}
.tomography .tick text {
    font-size: 14px;
    text-anchor: start;
}