arangodb/js/apps/system/aardvark/frontend/scss/_abstracts.scss

%pull-left {
  float: left;
}

%pull-right {
  float: right;
}

%clear-float {
  &:after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
  }
}

%clickable {
  cursor: pointer;
}

%fixedbar {
  background-color: $c-nav-bg;
  color: $c-white;
  left: 0;
  position: fixed;
  right: 0;
  width: 100%;
  z-index: 1000;
}

%negative {
  background-color: $c-negative;

  &:hover,
  &:focus {
    background-color: $c-negative-hover;
  }
}

%icon-negative {
  color: $c-negative;

  &:hover,
  &:focus {
    color: $c-negative-hover;
  }
}

%svg-negative {
  fill: $c-negative;

  &:hover,
  &:focus {
    fill: $c-negative-hover;
  }
}

%positive {
  background-color: $c-positive;

  &:hover,
  &:focus {
    background-color: $c-positive-hover;
  }
}

%icon-positive {
  color: $c-positive;

  &:hover,
  &:focus {
    color: $c-positive-hover;
  }
}

%svg-positive {
  fill: $c-positive;

  &:hover,
  &:focus {
    fill: $c-positive-hover;
  }
}

%warning {
  background-color: $c-warning;

  &:hover,
  &:focus {
    background-color: $c-warning-hover;
  }
}

%icon-warning {
  color: $c-warning;

  &:hover,
  &:focus {
    color: $c-warning-hover;
  }
}

%svg-warning {
  fill: $c-warning;

  &:hover,
  &:focus {
    fill: $c-warning-hover;
  }
}

%neutral {
  background-color: $c-neutral;

  &:hover,
  &:focus {
    background-color: $c-neutral-hover;
  }
}

%icon-neutral {
  color: $c-neutral;

  &:hover,
  &:focus {
    color: $c-neutral-hover;
  }
}

%svg-neutral {
  fill: $c-neutral;

  &:hover,
  &:focus {
    fill: $c-neutral-hover;
  }
}

%primary {
  background-color: $c-primary;

  &:hover,
  &:focus {
    background-color: $c-primary-hover;
  }
}

%icon-primary {
  color: $c-primary;

  &:hover,
  &:focus {
    color: $c-primary-hover;
  }
}

%header {
  background-color: $c-header-btn-bg;
  border: 1px solid $c-header-btn-border;
  color: $c-header-btn-fg;

  &:hover,
  &:focus {
    background-color: $c-white;
    color: $c-black;
  }
}

%notification {
  background-color: $c-notification;

  &:hover,
  &:focus {
    background-color: $c-notification-hover;
  }
}

%icon-notification {
  color: $c-notification;

  &:hover,
  &:focus {
    color: $c-notification-hover;
  }
}


%inactive {
  background-color: $c-inactive;

  &:hover,
  &:focus {
    background-color: $c-inactive-hover;
  }
}

%icon-inactive {
  color: $c-inactive;

  &:hover,
  &:focus {
    color: $c-inactive-hover;
  }
}

%svg-inactive {
  fill: $c-inactive;

  &:hover,
  &:focus {
    fill: $c-inactive-hover;
  }
}

%dropdown-menu {
  @extend %pull-left;
  @include border-radius(3px);

  background-color: $c-white;
  border: {
    color: $c-semi-transp;
    style: solid;
    width: 1px;
  }
  display: none;
  list-style: none;
  margin: 5px 0 0;
  padding: 5px 0;
  position: absolute;
  right: 0;
  top: 80%;
  z-index: 1000;

  li {
    line-height: 20px;
    white-space: nowrap;
    width: 100%;
  }

  li.dropdown-header {
    color: $c-dark-grey;
    font: {
      size: 15px;
      weight: 600;
    }
    font-variant: small-caps;
    padding: 0 15px;
  }

  li.dropdown-header:hover {
    cursor: default;
  }

  li.divider {
    background-color: $c-grey;
    height: 1px;
    margin: 10px 1px;
  }

  a {
    color: $c-nav-bg;
    padding: 0 20px;
  }

  &:before {
    @include border-triangle(7px, $c-semi-transp);

    position: absolute;
    right: 7px;
    top: -7px;
  }

  &:after {
    @include border-triangle(7px, $c-white);

    right: 8px;
    top: -6px;
  }

}