nairobi/app/assets/stylesheets/admin.scss

// Table of Contents
//
// 01. Global styles
// 02. Sidebar
// 03. List elements
// 04. Stats
// 05. Management
//

// 01. Global styles
// -----------------

$admin-color: #CF3638;

body.admin {

  header {
    border: 0;
  }

  .top-bar {
    background: $admin-color !important;
    height: auto;
  }

  form {
    .button {
      margin-top: 0;
    }

    input[type="text"], textarea {
      height: 48px\9;
      line-height: 48px\9;
      margin-bottom: 24px\9;
      width: 100%;
    }
  }

  table {

    tr {
      background: #f4f4f4;

      &:nth-child(odd) {
        background: white;
      }

      &:nth-child(even) {
        background: #f0f0f0;
      }
    }

    td.small {
      font-size: $small-font-size;
    }
  }

  #proposals {
    width: 100% !important;
  }

  .dashboard {

    ul, ol {
      margin-left: rem-calc(12);

      li {
        font-size: rem-calc(15);
        line-height: rem-calc(30);
        margin-bottom: rem-calc(12);
      }
    }

    p {
      font-size: rem-calc(15);
      line-height: rem-calc(30);
    }

    h3 {
      font-weight: bold;
    }
  }

  .button.secondary {
    margin-right: rem-calc(12);
  }

  .admin-content {

    .proposal-new, .proposal-edit {
      padding-top: 0;
    }

    .proposal-show {
      padding-top: rem-calc(54);
    }
  }

  .is-featured {
    margin-top: rem-calc(36);
  }

  .select-order {
    min-width: rem-calc(160);
  }
}

.for-print-only {
  display: none;
}

.admin-content {
  padding: $line-height !important;
}

// 02. Sidebar
// -----------

.admin-sidebar {
  border-bottom: 1px solid $border;
  border-right: 1px solid $border;

  ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;

    [class^="icon-"] {
      display: inline-block;
      font-size: rem-calc(24);
      padding-right: rem-calc(12);
      padding-top: rem-calc(4);
      padding-left: 12px\9 !important;
      padding-right: 12px\9 !important;
      vertical-align: middle;
    }

    li {
      background: white;
      margin: 0;
      outline: 0;

      &.active a {
        background: #f3f6f7;
        color: $admin-color;
        font-weight: bold;
      }
    }

    li.section {
      border-bottom: 1px dotted #d5d5d5;
      border-top: 1px dotted #d5d5d5;
      height: $line-height/2;
    }

    li a {
      color: $text;
      display: block;
      line-height: rem-calc(48);
      padding-left: rem-calc(12);
      vertical-align: top;

      &:hover {
        background: #f3f6f7;
        text-decoration: none;
      }
    }
  }
}

// 03. List elements
// -----------------

.admin-list {
  list-style-type: none;
  margin: 0;
  margin-bottom: rem-calc(48);

  form {
    clear: both;

    .checkbox {
      font-size: $small-font-size;
    }
  }

  li {
    border-bottom: 1px solid #E7E9EC;
    font-size: rem-calc(14);
    min-height: rem-calc(72);
    padding: rem-calc(12);

    &:first-child {
      border-top: 1px solid #E7E9EC;
    }

    &:nth-child(odd) {
      background: #F0F2F6;
    }
  }

  .tag {
    float: left;
    font-size: rem-calc(18);
    padding: 0;
  }

  .button {
    margin: 0;
  }
}

.delete {
  border-bottom: 1px dotted #CF2A0E;
  color: $delete;
  font-size: $small-font-size;

  &:hover, &:active, &:focus {
    border-bottom: 1px dotted white;
    color: #cf2a0e;
  }
}

.verified {
  color: $check;

  a {
    border-bottom: 1px dotted $check;
    color: $check;
    font-size: rem-calc(12);
  }
}

.archived {
  color: $text-medium;
  font-size: rem-calc(12);
}

.ignored {
  color: $text-medium;
  font-size: rem-calc(12);
}

.rejected {
  color: $delete;
}

.date {
  color: $text-medium;
  font-size: rem-calc(12);
  font-style: italic;
}

.level {
  font-size: rem-calc(12);
}

.official {
  background-color: #e7e7e7;
  border-radius: rem-calc(3);
  font-size: rem-calc(12);
  font-weight: normal;
  padding: rem-calc(6) rem-calc(12);
}

.button.small.success {
  margin-left: rem-calc(12);

  &.no-margin {
    margin-left: 0;
  }
}

.moderation-description {
  max-height: rem-calc(65);
  overflow: hidden;
  max-width: rem-calc(590);

  &:hover {
    cursor: text;
    max-height: rem-calc(1000);
    outline: 3px solid #ffbf47;
    padding: rem-calc(12);
    transition: max-height 0.9s;
    -moz-transition: max-height 0.9s;
    -webkit-transition: max-height 0.9s;
  }
}

// 04. Stats
// ---------

.stats {
  background: white;
}

.stats-numbers {
  p {
    color: $text-medium;
    font-size: rem-calc(13);
    padding: rem-calc(6);
    text-transform: uppercase;

    &.featured {
      background: $info-bg;
      border: 1px solid $info-border;
      font-weight: bold;
    }

    .number {
      color: $text;
      font-size: rem-calc(30);
      font-weight: bold;
    }
  }
}

// 05. Management
// --------------

.user-permissions {

  ul {
    list-style-type: none;
    margin-left: 0;

    li {
      font-size: rem-calc(14);
      margin-bottom: rem-calc(12);

      span {
        color: $text-medium;
        font-size: rem-calc(12);
      }

      .icon-check {
        color: $check;
      }

      .icon-x {
        color: $delete;
      }
    }
  }
}

.account-info, .login-as, .spending-proposal-info {
  background-color: #e7e7e7;
  border-radius: rem-calc(3);
  font-size: rem-calc(16);
  font-weight: normal;
  margin-bottom: rem-calc(12);
  padding: rem-calc(6) rem-calc(12);

  strong {
    font-size: rem-calc(18);
  }
}

.spending-proposal-info p {
  margin-bottom: 0;
}

body.admin {

  .investment-projects-list.medium-9 {
    width: 100%;
  }

  .investment-projects-summary {

    th, td {
      text-align: center;

      &:first-child {
        font-weight: bold;
        text-align: left;
      }

      &:last-child {
        font-weight: bold;
      }
    }

    tr {
      &:nth-child(even) td:last-child {
        background: $success-border;
      }

      &:nth-child(odd) td:last-child {
        background: $success-bg;
      }
    }
  }
}

.admin-content .select-geozone {

  a {
    display: block;

    &.active {
      color: $brand;
      font-weight: bold;
      text-decoration: underline;
    }
  }
}

table.investment-projects-summary {

  td.total-price {
    white-space: nowrap;
  }
}