nairobi/app/assets/stylesheets/admin.scss

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

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

body.admin {
  background: white;

  h2 {
    font-size: rem-calc(24);
    font-weight: bold;
  }

  h3 {
    font-size: rem-calc(14);
    font-weight: normal;
  }

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

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

  #proposals {
    width: 100% !important;
  }

  .dashboard {
    margin-bottom: rem-calc(48);

    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 {
    margin-top: rem-calc(24);

    .filters h2 {
      margin-top: 0;
    }

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

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

.admin-sidebar {
  margin-top: rem-calc(24);

  @media (min-width: $small-breakpoint) {
    margin-left: rem-calc(-20);
  }

  a {
    color: white\9 !important;
  }

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

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

    li {
      background: #2E343F;
      border-bottom: 1px solid #292f39;
      border-top: 1px solid #353c49;
      margin: 0;
      outline: 0;

      &:first-child {
        background: #2B3139;
        color: rgba(255,255,255,0.3);
        padding: rem-calc(24) rem-calc(12);
        text-transform: uppercase;
      }

      &.active{
        background: #373D47;

        a:not(.button) {
          color: white;
        }
      }
    }

    li a:not(.button) {
      color: rgba(255,255,255,0.3);
      line-height: rem-calc(48);
      padding-left: rem-calc(12);
      vertical-align: top;

      &:hover {
        color: white;
      }
    }
  }
}

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

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

  form {
    clear: both;

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

  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: rem-calc(12);

  &: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.tiny.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 {
  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);
  }
}