icinga-php-library/asset/css/search-editor.less

// Style

.search-editor {
  ul, ol {
    list-style-type: none;
  }

  fieldset {
    border: none;
  }

  button, input[type="submit"] {
    .appearance(none);
    background: none;

    &:not(.cancel-button) {
      border: none;
    }
  }

  select:not([multiple]) {
    .appearance(none);
    padding-right: 1.5625em;
    background-image: url('@{iplWebAssets}/img/select-icon-text-color.svg');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    .rounded-corners(0);
  }

  i.icon:before {
    color: var(--search-editor-control-color, @search-editor-control-color);
  }

  .drag-initiator {
    cursor: grab;
  }

  input[type="text"], select {
    border: none;
    background: var(--search-term-bg, @search-term-bg);
    color: var(--search-term-color, @search-term-color);
    text-overflow: ellipsis;
  }

  :not(fieldset) > select {
    .rounded-corners();
  }

  fieldset > input[data-type="column"] {
    .rounded-corners(.4em 0 0 .4em);
  }

  fieldset > input[data-type="value"] {
    .rounded-corners(0 .4em .4em 0);
  }

  .search-error {
    input:invalid {
      background: var(--search-term-invalid-bg, @search-term-invalid-bg);
      color: var(--search-term-invalid-color, @search-term-invalid-color);
    }

    .search-errors {
      color: var(--search-editor-error-color, @search-editor-error-color);
      font-weight: bold;
    }
  }

  li > select:not([multiple]) {
    background-color: var(--search-logical-operator-bg, @search-logical-operator-bg);
    color: var(--search-logical-operator-color, @search-logical-operator-color);
    .rounded-corners();
  }

  .sortable-ghost {
    border: dashed .2em var(--search-editor-drag-outline-color, @search-editor-drag-outline-color);

    fieldset {
      opacity: .5;
    }
  }

  .buttons {
    ul {
      .rounded-corners();
      .box-shadow(0, 0, .5em);
      border: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color);
      background: var(--search-editor-context-menu-bg, @search-editor-context-menu-bg);

      li:not(:first-child) {
        border-top: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color);
      }

      button:hover {
        background: var(--primary-button-bg, @primary-button-bg);
        color: var(--primary-button-color, @primary-button-color);
      }

      // Add rounded corners to buttons as well, otherwise their
      // background is not rounded and overlaps the list's corners
      :first-child button {
        .rounded-corners();
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
      :last-child button {
        .rounded-corners();
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      &:before {
        // The left pointing arrow
        border-bottom: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color);
        border-left: 1px solid var(--search-editor-context-menu-border-color, @search-editor-context-menu-border-color);
        background: var(--search-editor-context-menu-bg, @search-editor-context-menu-bg);
      }
    }

    &:hover i.icon:before {
      .rounded-corners();
      background: var(--primary-button-bg, @primary-button-bg);
      color: var(--primary-button-color, @primary-button-color);
    }
  }

  input[type="submit"] {
    .rounded-corners();
    background: var(--primary-button-bg, @primary-button-bg);
    color: var(--primary-button-color, @primary-button-color);

    &:hover {
      background: var(--primary-button-hover-bg, @primary-button-hover-bg);
    }
  }
}

// Layout

.search-editor-opener + a.modal-opener {
  display: none;
}

.search-editor {
  padding: 1em;

  @item-spacing: .5em;

  ul, ol {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  li {
    display: flex;

    > :not(:first-child) {
      margin-left: @item-spacing;
    }
  }

  ol {
    padding-left: 1em;
    padding-bottom: @item-spacing;

    > li:first-child,
    > :not(.filter-chain) + li {
      margin-top: @item-spacing;
    }
  }

  input[type="text"], select {
    padding: 0 .5em;
  }

  li > select {
    margin-right: auto;
  }

  fieldset {
    display: flex;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;

    input[data-type="value"] {
      flex: 1 1 auto;
    }

    > :not(:first-child) {
      margin-left: .1em;
    }
  }

  input, button, select {
    height: 28/12em; // Target Pixels @ default font size / default font size
  }

  .search-errors {
    margin-left: .5em;
  }

  i.icon:before {
    margin: 0;
    font-size: 1.5em;
    line-height: 1.5;
  }

  .buttons {
    position: relative;

    ul {
      position: absolute;
      right: 32/12em; // Target distance @ default font size / default font size
      z-index: 1;
      width: auto;
      padding: 0;

      display: none;

      button {
        z-index: 1;
        width: 100%;
        text-align: left;
        white-space: nowrap;
      }

      &:before {
        // The left pointing arrow
        content: "";
        display: block;
        height: 1em;
        transform: rotate(-135deg);
        width: 1em;
        z-index: 1;

        position: absolute;
        top: ((28/12)/2)-.5em; // ((First row pixels @ default font size / default font size) / 2) - own half width
        right: -.5em;
      }
    }

    &:hover ul {
      display: block;
    }

    i.icon:before {
      padding: ((28/18)-1)/2em; // (Container pixels / default font size) - line height / (padding-top,padding-bottom)
      line-height: 1;
    }
  }

  .cancel-button {
    margin-top: 2em - @item-spacing;
  }

  input[type="submit"] {
    float: right;
    width: 6em;
    margin-top: 2em - @item-spacing;
  }

  input[type="submit"]:not(:last-of-type) {
    display: none;
  }
}