camunda-modeler/client/lib/base/components/menu-bar.less

Camunda Modeler for BPMN, DMN and CMMN, based on bpmn.io

@import "buttons/multi-button";

/**
 * menu-bar related styles
 */
.menu-bar {
  .no-user-select;

  align-items: center;

  line-height: 30px;
}

.menu-bar .group {
  display: flex;
}

.menu-bar .group > .entry {
  flex: initial;

  margin-left: 5px;
}

.menu-bar .group .separator {
  background: #CCC;
  width: 1px;
  box-shadow: 0 0 1px #EEE;
  height: 20px;
  display: inline-block;

  vertical-align: middle;
}

.menu-bar .group button {
  border: none;
  background: transparent;

  vertical-align: middle;
}

.menu-bar .group > .entry > button,
.menu-bar .group > .entry .multi-button {
  border-radius: 3px;

  padding: 5px;

  &:not(.disabled) {

    &:hover,
    &.active {
      padding: 4px;
    }

    &:hover {
      background: @color-light-gray;
      border: solid 1px #ccc;
    }

    &:active,
    &.active {
      border: solid 1px #aaa;
      box-shadow: inset 1px 1px 1px #aaa;
      background: #ddd;
    }
  }

  &.disabled {
    color: #999;
    cursor: default;
  }
}

.menu-bar .group button {
  font-size: 14px;
  outline: none;
}

.menu-bar .group .multi-button {
  .multi-button;
}

.menu-bar .group .caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 3px dashed;
  border-top: 3px solid\9;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}