diffux/diffux

View on GitHub
app/assets/stylesheets/_global.scss

Summary

Maintainability
Test Coverage
// from http://www.paulirish.com/2012/box-sizing-border-box-ftw/
//*, *:before, *:after {
//  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
//}

body {
  padding-bottom: 50px;

  .table {
    width: auto;
  }
}

figure {
  margin: 1em 0;
}

.navbar-brand {
  $navbar-height:      50px;
  $logo-height:        25px;
  $logo-width:         83px;
  $padding-top:        ($navbar-height - $logo-height) * .4;
  $padding-bottom:     $navbar-height - $logo-height - $padding-top;

  padding-bottom: $padding-bottom;
  padding-top: $padding-top;

  img {
    height: $logo-height;
    width: $logo-width;
  }
}

.table.table-vertical tr:first-child {
  th,
  td {
    border-top: 0;
  }
}

.help {
  max-width: 640px;
}

.url-oneline {
  display: inline-block;
  max-width: 30em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.url-multiline {
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}

form.button_to {
  display: inline-block; // Make `button_to` containers flow as buttons
}

.btn .glyphicon {
  vertical-align: -4%;
}

.project-viewports {
  margin-bottom: 0;
}

.button-group {
  margin-bottom: 20px;
}

table .progress {
  // Remove bottom-margin for sweep progress bars when rendered in a table
  margin-bottom: 0;
}

.sweep-progress-bar-pending {
  background-color: #ccc;
}

// Used in tables
.numeric {
  text-align: right;
}

// Meter element
meter {
  -moz-appearance: none;
  -webkit-appearance: none; // reset appearance
  background: $gray-lighter; // Firefox
  width: 100%;

  &::-webkit-meter-bar {
    background: $gray-lighter;
  }

  &::-webkit-meter-optimum-value {
    background: $brand-success;
  }

  &::-webkit-meter-suboptimum-value {
    background: $brand-warning;
  }

  &::-webkit-meter-even-less-good-value {
    background: $brand-danger;
  }
}

:-moz-meter-optimum::-moz-meter-bar {
  background: $brand-success;
}

:-moz-meter-sub-optimum::-moz-meter-bar {
  background: $brand-warning;
}

:-moz-meter-sub-sub-optimum::-moz-meter-bar {
  background: $brand-danger;
}