Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

//**********
// VARIABLES
//**********

// Color setup
$blue: #4078c0;
$green: #dbffdb;
$red: #ffdddd;
$orange: #d26911;
$grey-80: #333;
$grey-70: #666;
$grey-60: #767676;
$grey-50: #888;
$grey-40: #ddd;
$grey-30: #e5e5e5;
$grey-20: #eee;
$grey-10: #f5f5f5;

// Functional text colors
$normal-text: $grey-80;
$mid-text: $grey-70;
$subtle-text: $grey-60;
$ghost-text: $grey-50;
$link-color: $blue;
$diff-add-color: $green;
$diff-remove-color: $red;
$diff-add-highlight: lighten($diff-add-color, 5%);
$diff-remove-highlight: lighten($diff-remove-color, 5%);

// Functional border colors
$border-color: $grey-40;
$mid-border-color: $grey-20;
$light-border-color: $grey-10;
$selected-border-color: $orange;

// Functional background colors
$background-color: $grey-10;
$highlighted-background-color: lighten($blue, 10%);

// Defaults
$small-font-size: 12px;
$base-font-size: 14px;
$large-font-size: 16px;
$heading-font-size: 20px;
$baseline: 7px;
$border-radius: 3px;


//*******
// MIXINS
//*******


// Set font size on an element and set line-height to maintain vertical spacing
//
// $font-size - Font-size in pixels (use a font-size variable)
@mixin font-size($font-size) {
  $lines: ceil($font-size / $baseline);
  // Ensure that the difference between font-size and line-height is between 4px and 6px
  $font-line-diff: $lines * $baseline - $font-size;
  // `/ 1px` makes the lhs unitless
  @if $font-line-diff / 1px == 0 {
    $lines: $lines + 1;
  } @else if $font-line-diff < 4 {
    $lines: $lines + 0.5;
  }
  
  font-size: $font-size;
  line-height: $lines * $baseline / $font-size * 1em;
}


// Calculates spacing units in px for a given # of baselines.
// ex:
// padding: spacing(3, $offset: 1px);
//
// $lines - integer # of spacing units to return
// $offset - pixel value of any offsets (such as borders), defaults to 0
@function spacing($lines, $offset: 0) {
  @return $lines * $baseline - $offset;
}


// Standard clearfix, from HTML5 Boilerplate.
// 1. Necessary for ie7
@mixin clearfix() {
   *zoom: 1; // 1

   &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}


//**********************************
// STYLE OVERRIDES
// These should be touched with care
//**********************************


* {
  @include font-size($base-font-size);
  font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
  color: $link-color;
}


// Header
#headerbar {
  background: $background-color;
  padding: spacing(1);
  
  #title,
  #title a {
    color: $normal-text;
    font-weight: bold;
    @include font-size($large-font-size);
  }
  
  #title .version {
    color: $mid-text;
    @include font-size($small-font-size);
  }
  
  #search {
    input {
      border-color: darken($border-color, 10%);
      @include font-size($small-font-size);
      background-color: white;
      border-radius: $border-radius;
      padding: spacing(.5);
    } 
  }
}


// Account nav
#accountnav {
  @include clearfix();

  li {
    margin: -(spacing(1)) 0;
    
    &:hover {
      background: none;
    }
    
    a {
      font-size: $base-font-size;
      line-height: unset;
      height: auto;
      color: $normal-text;
      padding: 0 spacing(2);
      
      &.user-nav-item {
        padding: 0 spacing(2);
      }
    }
    
    // Account nav dropdown
    ul {
      padding: spacing(1) 0;
      background: white;
      border: 1px solid $border-color;
      border-radius: $border-radius;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
      
      &:before,
      &:after {
        position: absolute;
        display: inline-block;
        content: "";
        border: 8px solid transparent;
        border-bottom-color: rgba(0,0,0,0.15);
      }
      
      &:before {
          top: -16px;
          left: auto;
          right: 9px;
      }
      
      &:after {
        border-width: 7px;
        border-bottom-color: #fff;
        top: -14px;
        left: auto;
        right: 10px;
      }
      
      li {
        &:hover {
          background: $link-color;
          
          a {
            color: white;
          }
        }
        
        a {
          padding: spacing(.5) spacing(2);
        }
        
        &:last-child {
          border-radius: 0;
        }
      }
    }
  }
  
  // scope only top level links
  > li > a {
    height: 40px;
    line-height: 39px;
  }
}


// Navbar
#navbar-container {
  margin: 0 0 spacing(4);  
}

#navbar {
  background: white;
  border-bottom: 1px solid $mid-border-color;
  padding: 0 spacing(1) 0 (72-(spacing(1)));
  
  li {
    display: inline-block;
    height: auto;
    margin: 0 spacing(1) 0 0;
  }
  
  a {
    padding: spacing(1);
    display: block;
    color: $normal-text;
    font-weight: bold;
    font-size: $base-font-size;
    
    &:hover {
      color: $link-color;
    }
  }
}


// Box
.box,
.modalbox {
  border-radius: 0;
  background: white;
  border: 0;
  box-shadow: none;
}

.box-inner,
.modalbox-inner {
  border-radius: $border-radius;
  background: none;
}


// Dashboard
.dashboard {
  border: 0;
  border-radius: 0;
  
  .box-inner {
    border-radius: 0;
  }
}

#dashboard-wrapper {
  background: white;
  border-radius: 0;
}

#dashboard_actions {
  border-radius: $border-radius 0 0 $border-radius;
}

#dashboard_sidebar {
  width: spacing(32);
  margin-top: 38px;
}

#dashboard-navbar {
  // Outgoing/Incoming sections
  li.section {
    border: 1px solid $border-color;
    border-radius: $border-radius;
    margin: 0 0 spacing(3) 0;
    
    .datagrid-sidebar-row {
      line-height: inherit;
      padding: spacing(1) spacing(2);
      
      .label {
        font-size: $base-font-size;
        margin: 0;
      }
    }
    
    > .datagrid-sidebar-row {
      padding: spacing(1) spacing(2);
      border-bottom: 1px solid $mid-border-color;
    }
    
    .item {
      border-bottom: 1px solid $mid-border-color;
      text-shadow: 0 1px 0 white;
      
      &:last-child {
        border-bottom: 0;
      }
    }
  }
  
  // Hover state
  li.has-url:hover .datagrid-sidebar-row {
    background: $background-color;
  }
  
  // Active state
  li.active {
    border-left: 2px solid $selected-border-color;
    
    .datagrid-sidebar-row,
    &.has-url:hover .datagrid-sidebar-row {
      background: none;
      cursor: default;
      
      .label {
        font-weight: bold;
        a {
          color: $normal-text; 
        }
      }
    }
  }
  
  // Counter
  li .count {
    color: $mid-text;
    background: $mid-border-color;
    border: none;
    padding: 3px 7px;
    border-radius: 20px;
    font-size: $small-font-size;
    font-weight: bold;
    line-height: 1;
    position: static;
    float: right;
    margin: 1px 0 0 7px;
  }
  
  li a {
    color: $link-color;
  }
  
  li {
    .datagrid-sidebar-row {
      padding: spacing(1) spacing(2);
    }
  }
  
  // User page profile
  #user_page_profile {
    border: 1px solid $border-color;
    border-radius: $border-radius;
    margin: 0 0 spacing(3) 0;
    
    .datagrid-sidebar-row:first-child {
      border-bottom: 1px solid $mid-border-color;
    }
    
    .nickname,
    .fn {
      margin: 0;
    }
    
    .nickname {
      @include font-size($large-font-size);
    }
    
    .fn {
      @include font-size($base-font-size);
      padding-bottom: 0;
    }
    
    .email {
      @include font-size($base-font-size);
      color: $link-color;
      
      &:hover {
        text-decoration: underline;
      }
    }
    
    .logged-in {
      @include font-size($base-font-size);
      border-top: 1px solid $mid-border-color;
      color: $mid-text;
      padding-bottom: 0;
      margin-top: 0;
    }
    
    .joined {
      @include font-size($base-font-size);
      color: $mid-text;
    }
  }
}


// Dashboard main content
span.label-submitted {
  background: $diff-add-color;
  margin-right: spacing(1);
  color: $normal-text;
}

span.label-discarded {
  background: $diff-remove-color;
  margin-right: spacing(1);
  color: $normal-text;
}

#dashboard-main {
  border-left: 0;
  border-radius: 0;
  
  .datagrid-titlebox {
    border-radius: 0;
    padding: 0;
  }
  
  .datagrid td.bugs a {
    color: $link-color;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

// Data grid
.datagrid-title,
.datagrid-titlebox {
  background: white !important;
  border-bottom: 0;
  padding: 0;
}

.datagrid-titlebox {
  padding: 0;
  
  h1 {
    @include font-size($heading-font-size);
    padding: 0;
    display: inline-block;
    margin-bottom: spacing(2);
  }
  
  ul li a {
    color: $link-color;
    text-decoration: none;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.datagrid-header,
.datagrid-header:hover {
  background: none;
  border-bottom-color: $border-color;
  border-right: 0;
  color: $normal-text;
  padding: spacing(.5) spacing(1);
}

.datagrid {
  .datagrid-headers,
  .datagrid-headers:hover {
    background: white;
  }
  
  td {
    padding: 7px;
    
    a {
      color: $link-color;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  [class^="age"] {
    border: 0;
  }
  
  tr.odd,
  tr.even {
    background: white;
    
    td {
      border-bottom: 1px solid $mid-border-color;
    }
    
    .age1,
    .age2,
    .age3 {
      background: $diff-add-color;
    }
    
    .age4,
    .age5 {
      background: $diff-remove-color;
    }
  }
  
  .shipit-count,
  .issue-count {
    border: 0;
    color: $normal-text;
  }
  
  .shipit-count {
    background: $diff-add-color;
  }
  
  .issue-count {
    background: $diff-remove-color;
  }
}

.datagrid-body {
  color: $mid-text;
}


// Datagrid pagination
.datagrid-wrapper .paginator {
  padding: spacing(4) spacing(2);
  font-weight: bold;
  text-align: center;
  
  a,
  .current-page {
    padding: spacing(1) spacing(2);
    border-radius: $border-radius;
    border-color: $mid-border-color;
    color: $link-color;
  }
  
  a:hover {
    border-color: $mid-border-color;
    color: $link-color;
    background: $background-color;
  }
  
  .current-page {
    color: white;
    background: $link-color;
  }
  
  .page-count {
    color: $ghost-text;
  }
}

SassMeister-output.css

* {
  font-size: 14px;
  line-height: 1.5em;
  font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

a {
  color: #4078c0;
}

#headerbar {
  background: #f5f5f5;
  padding: 7px;
}

#headerbar #title,
#headerbar #title a {
  color: #333;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.3125em;
}

#headerbar #title .version {
  color: #666;
  font-size: 12px;
  line-height: 1.45833em;
}

#headerbar #search input {
  border-color: #c4c4c4;
  font-size: 12px;
  line-height: 1.45833em;
  background-color: white;
  border-radius: 3px;
  padding: 3.5px;
}

#accountnav {
  *zoom: 1;
}

#accountnav:before,
#accountnav:after {
  content: " ";
  display: table;
}

#accountnav:after {
  clear: both;
}

#accountnav li {
  margin: -7px 0;
}

#accountnav li:hover {
  background: none;
}

#accountnav li a {
  font-size: 14px;
  line-height: unset;
  height: auto;
  color: #333;
  padding: 0 14px;
}

#accountnav li a.user-nav-item {
  padding: 0 14px;
}

#accountnav li ul {
  padding: 7px 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

#accountnav li ul:before,
#accountnav li ul:after {
  position: absolute;
  display: inline-block;
  content: "";
  border: 8px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.15);
}

#accountnav li ul:before {
  top: -16px;
  left: auto;
  right: 9px;
}

#accountnav li ul:after {
  border-width: 7px;
  border-bottom-color: #fff;
  top: -14px;
  left: auto;
  right: 10px;
}

#accountnav li ul li:hover {
  background: #4078c0;
}

#accountnav li ul li:hover a {
  color: white;
}

#accountnav li ul li a {
  padding: 3.5px 14px;
}

#accountnav li ul li:last-child {
  border-radius: 0;
}

#accountnav > li > a {
  height: 40px;
  line-height: 39px;
}

#navbar-container {
  margin: 0 0 28px;
}

#navbar {
  background: white;
  border-bottom: 1px solid #eee;
  padding: 0 7px 0 65px;
}

#navbar li {
  display: inline-block;
  height: auto;
  margin: 0 7px 0 0;
}

#navbar a {
  padding: 7px;
  display: block;
  color: #333;
  font-weight: bold;
  font-size: 14px;
}

#navbar a:hover {
  color: #4078c0;
}

.box,
.modalbox {
  border-radius: 0;
  background: white;
  border: 0;
  box-shadow: none;
}

.box-inner,
.modalbox-inner {
  border-radius: 3px;
  background: none;
}

.dashboard {
  border: 0;
  border-radius: 0;
}

.dashboard .box-inner {
  border-radius: 0;
}

#dashboard-wrapper {
  background: white;
  border-radius: 0;
}

#dashboard_actions {
  border-radius: 3px 0 0 3px;
}

#dashboard_sidebar {
  width: 224px;
  margin-top: 38px;
}

#dashboard-navbar li.section {
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 0 21px 0;
}

#dashboard-navbar li.section .datagrid-sidebar-row {
  line-height: inherit;
  padding: 7px 14px;
}

#dashboard-navbar li.section .datagrid-sidebar-row .label {
  font-size: 14px;
  margin: 0;
}

#dashboard-navbar li.section > .datagrid-sidebar-row {
  padding: 7px 14px;
  border-bottom: 1px solid #eee;
}

#dashboard-navbar li.section .item {
  border-bottom: 1px solid #eee;
  text-shadow: 0 1px 0 white;
}

#dashboard-navbar li.section .item:last-child {
  border-bottom: 0;
}

#dashboard-navbar li.has-url:hover .datagrid-sidebar-row {
  background: #f5f5f5;
}

#dashboard-navbar li.active {
  border-left: 2px solid #d26911;
}

#dashboard-navbar li.active .datagrid-sidebar-row,
#dashboard-navbar li.active.has-url:hover .datagrid-sidebar-row {
  background: none;
  cursor: default;
}

#dashboard-navbar li.active .datagrid-sidebar-row .label,
#dashboard-navbar li.active.has-url:hover .datagrid-sidebar-row .label {
  font-weight: bold;
}

#dashboard-navbar li.active .datagrid-sidebar-row .label a,
#dashboard-navbar li.active.has-url:hover .datagrid-sidebar-row .label a {
  color: #333;
}

#dashboard-navbar li .count {
  color: #666;
  background: #eee;
  border: none;
  padding: 3px 7px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  position: static;
  float: right;
  margin: 1px 0 0 7px;
}

#dashboard-navbar li a {
  color: #4078c0;
}

#dashboard-navbar li .datagrid-sidebar-row {
  padding: 7px 14px;
}

#dashboard-navbar #user_page_profile {
  border: 1px solid #ddd;
  border-radius: 3px;
  margin: 0 0 21px 0;
}

#dashboard-navbar #user_page_profile .datagrid-sidebar-row:first-child {
  border-bottom: 1px solid #eee;
}

#dashboard-navbar #user_page_profile .nickname,
#dashboard-navbar #user_page_profile .fn {
  margin: 0;
}

#dashboard-navbar #user_page_profile .nickname {
  font-size: 16px;
  line-height: 1.3125em;
}

#dashboard-navbar #user_page_profile .fn {
  font-size: 14px;
  line-height: 1.5em;
  padding-bottom: 0;
}

#dashboard-navbar #user_page_profile .email {
  font-size: 14px;
  line-height: 1.5em;
  color: #4078c0;
}

#dashboard-navbar #user_page_profile .email:hover {
  text-decoration: underline;
}

#dashboard-navbar #user_page_profile .logged-in {
  font-size: 14px;
  line-height: 1.5em;
  border-top: 1px solid #eee;
  color: #666;
  padding-bottom: 0;
  margin-top: 0;
}

#dashboard-navbar #user_page_profile .joined {
  font-size: 14px;
  line-height: 1.5em;
  color: #666;
}

span.label-submitted {
  background: #dbffdb;
  margin-right: 7px;
  color: #333;
}

span.label-discarded {
  background: #ffdddd;
  margin-right: 7px;
  color: #333;
}

#dashboard-main {
  border-left: 0;
  border-radius: 0;
}

#dashboard-main .datagrid-titlebox {
  border-radius: 0;
  padding: 0;
}

#dashboard-main .datagrid td.bugs a {
  color: #4078c0;
  text-decoration: none;
}

#dashboard-main .datagrid td.bugs a:hover {
  text-decoration: underline;
}

.datagrid-title,
.datagrid-titlebox {
  background: white !important;
  border-bottom: 0;
  padding: 0;
}

.datagrid-titlebox {
  padding: 0;
}

.datagrid-titlebox h1 {
  font-size: 20px;
  line-height: 1.225em;
  padding: 0;
  display: inline-block;
  margin-bottom: 14px;
}

.datagrid-titlebox ul li a {
  color: #4078c0;
  text-decoration: none;
}

.datagrid-titlebox ul li a:hover {
  text-decoration: underline;
}

.datagrid-header,
.datagrid-header:hover {
  background: none;
  border-bottom-color: #ddd;
  border-right: 0;
  color: #333;
  padding: 3.5px 7px;
}

.datagrid .datagrid-headers,
.datagrid .datagrid-headers:hover {
  background: white;
}

.datagrid td {
  padding: 7px;
}

.datagrid td a {
  color: #4078c0;
}

.datagrid td a:hover {
  text-decoration: underline;
}

.datagrid [class^="age"] {
  border: 0;
}

.datagrid tr.odd,
.datagrid tr.even {
  background: white;
}

.datagrid tr.odd td,
.datagrid tr.even td {
  border-bottom: 1px solid #eee;
}

.datagrid tr.odd .age1,
.datagrid tr.odd .age2,
.datagrid tr.odd .age3,
.datagrid tr.even .age1,
.datagrid tr.even .age2,
.datagrid tr.even .age3 {
  background: #dbffdb;
}

.datagrid tr.odd .age4,
.datagrid tr.odd .age5,
.datagrid tr.even .age4,
.datagrid tr.even .age5 {
  background: #ffdddd;
}

.datagrid .shipit-count,
.datagrid .issue-count {
  border: 0;
  color: #333;
}

.datagrid .shipit-count {
  background: #dbffdb;
}

.datagrid .issue-count {
  background: #ffdddd;
}

.datagrid-body {
  color: #666;
}

.datagrid-wrapper .paginator {
  padding: 28px 14px;
  font-weight: bold;
  text-align: center;
}

.datagrid-wrapper .paginator a,
.datagrid-wrapper .paginator .current-page {
  padding: 7px 14px;
  border-radius: 3px;
  border-color: #eee;
  color: #4078c0;
}

.datagrid-wrapper .paginator a:hover {
  border-color: #eee;
  color: #4078c0;
  background: #f5f5f5;
}

.datagrid-wrapper .paginator .current-page {
  color: white;
  background: #4078c0;
}

.datagrid-wrapper .paginator .page-count {
  color: #888;
}