consul/consul

View on GitHub
app/assets/stylesheets/admin/menu.scss

Summary

Maintainability
Test Coverage
.admin-sidebar {
  @include background-with-text-contrast($sidebar);
  background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%);
  border-right: 1px solid $border;

  ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-#{$global-left}: 0;
    padding: 0;
  }

  > ul > li > :first-child {
    display: flex;
    font-weight: bold;

    &::before,
    &::after {
      flex: 1em 0 0;
      margin-top: 0.1em;
    }

    @mixin icon($name, $style) {
      @include has-fa-icon($name, $style);

      &::before {
        @extend %admin-menu-icon;
      }
    }

    &.booths-link {
      @include icon(archive, solid);
    }

    &.budgets-link,
    &.investments-link,
    &.budget-investments-link {
      @include icon(chart-pie, solid);
    }

    &.comments-link {
      @include icon(comments, regular);
    }

    &.dashboard-link {
      @include icon(check, solid);
    }

    &.debates-link {
      @include icon(comment-alt, solid);
    }

    &.invitations-link {
      @include icon(envelope, regular);
    }

    &.legislation-link,
    &.legislation-proposals-link,
    &.legislation-processes-link {
      @include icon(file-alt, solid);
    }

    &.messages-link {
      @include icon(file-archive, regular);
    }

    &.moderated-content-link {
      @include icon(eye, regular);
    }

    &.polls-link {
      @include icon(check-circle, regular);
    }

    &.print-proposals-link,
    &.print-investments-link {
      @include icon(print, solid);
    }

    &.profiles-link {
      @include icon(users, solid);
    }

    &.proposals-link,
    &.proposal-notifications-link {
      @include icon(lightbulb, solid);
    }

    &.settings-link {
      @include icon(cog, solid);
    }

    &.signature-sheets-link {
      @include icon(file-alt, regular);
    }

    &.site-customization-link {
      @include icon(pencil-alt, solid);
    }

    &.stats-link {
      @include icon(chart-line, solid);
    }

    &.users-link {
      @include icon(user, solid);
    }

    &.ml-link {
      @include icon(brain, solid);
    }
  }

  li {
    ul {
      margin-left: calc(#{$line-height * 2} / 3);
      border-left: 1px solid $sidebar-hover;
      padding-left: calc(#{$line-height} / 2);
    }

    &.is-active a,
    &[aria-current] a {
      background: $sidebar-hover;
      border-left: 2px solid $sidebar-active;
      font-weight: bold;
    }
  }

  li > :first-child {
    color: inherit;
    display: block;
    padding: calc(#{$line-height} / 2);
    vertical-align: top;

    &:hover {
      background: $sidebar-hover;
      color: inherit;
      text-decoration: none;
    }
  }

  [aria-expanded] {
    @include has-fa-icon(chevron-down, solid, after);
    line-height: inherit;
    text-align: inherit;
    width: 100%;

    &::after {
      margin-#{$global-left}: auto;
      transition: 0.25s;
    }

    &:not([disabled]) {
      cursor: pointer;
    }
  }

  [aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  ul ul {
    border-bottom: 0;
    margin-left: $line-height;

    li:first-child {
      padding-top: calc(#{$line-height} / 2);
    }

    li:last-child {
      padding-bottom: calc(#{$line-height} / 2);
    }

    a {
      font-weight: normal;
      margin-#{$global-right}: 0;
    }
  }
}