grecia/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-links {
      background: darken($admin-color, 15%);
    }
  }

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

  form {

    .button {
      margin-top: 0;
    }

    input[type="text"], textarea {
      width: 100%;
    }

    .input-group input[type="text"] {
      border-radius: 0;
      margin-bottom: 0 !important;
    }
  }

  table {

    th {
      text-align: left;

      &.with-button {
        line-height: $line-height*2;
      }
    }

    tr {
      background: white;
      border: 1px solid $border;

      &:hover {
        background: #f3f6f7;
      }
    }

    input[type="submit"] ~ a, a ~ a {
      margin-left: $line-height/2;
      margin-right: $line-height/2;
    }
  }

  hr {
    max-width: none;
  }

  .menu.simple li.active {
    border-bottom: 2px solid $admin-color;
    color: $admin-color;
  }

  #proposals {
    width: 100% !important;
  }

  .accordion-title {
    font-size: $base-font-size;
  }

  .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;
}

@include breakpoint(medium) {

  tr {

    .on-hover-block {
      display: none;
    }

    &:hover .on-hover-block {
      display: block;
      margin: 0;
      margin-top: $line-height/2;
      width: 100%;
    }
  }
}

@include breakpoint(medium) {

  tr {

    .on-hover {
      display: none;
    }

    &:hover .on-hover {
      display: inline;
    }
  }
}

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

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

  @include breakpoint(medium) {
    padding-bottom: $line-height*3;
  }

  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);
      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
// -----------------

.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;
}

.official {
  background-color: #e7e7e7;
  border-radius: rem-calc(3);
  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(700);

  &:hover {
    max-height: rem-calc(1000);
    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: $line-height;
  padding: $line-height/2;

  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, .admin-content .select-heading {

  a {
    display: block;

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

table.investment-projects-summary {

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