ui-modules/app-inspector/app/components/workflow/workflow-steps.less

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
.workflow-steps {

  position: relative;

  .workflow-steps-main {
    position: relative;
  }

  .workflow-step {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 12px;
    margin-bottom: 12px;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;

    .workflow-steps .workflow-step {
      // when nested, smaller right margin
      margin-right: 36px;
    }

    border: solid @gray-light-lighter 1px;

    .rhs-icons {
      float: right;
      display: flex;
      gap: 1ex;
      align-items: center;
      max-width: 50%;
      white-space: nowrap;
      margin-left: 1em;
      .expand-toggle {
        cursor: pointer;
      }
      .step-name {
        font-weight: 600;
        font-size: 90%;
        margin-right: 1ex;
        margin-top: 1px;
        flex: 1 5 auto;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .step-id {
        .monospace();
        font-size: 80%;
        flex: 5 1 auto;
        background-color: @primary-50;
        white-space: normal;

        &.handy {
          cursor: pointer;
        }
      }
      .focus-step {
        //background color comes from label-info class
        //background: @primary-100;
      }
    }
    .step-id.hover-only {
      visibility: hidden;
      //display: none;
    }
    &:hover > .rhs-icons > .step-id.hover-only {
      visibility: visible;
      display: inherit;
    }
    .workflow-step-pill {
      padding: 2px 6px;
      border-radius: 9px;
      //background: @gray-lighter;
      font-size: 75%;
    }
    .step-block-title {
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 1.5ex;
      top: 1px;
      position: relative;

      .step-index {
        font-size: 70%;
        border: solid 1px @text-color;
        padding: 0px 3px;
        border-radius: 15px;
        margin-right: 1ex;
        top: -2px;
        position: relative;
        padding-bottom: 1px;
      }

      .step-title-code {
        .monospace();
        font-size: 85%;
        font-weight: 300;
        color: @gray-light;
        top: -1px;
        position: relative;
      }
      .step-left-extra {
        font-size: 90%;
        //font-weight: 300;
        color: @gray-light;
        top: -1px;
        position: relative;
      }
    }

    .step-details {
      margin-top: 12px;
      .space-above {
        margin-top: 6px;
      }
      .more-space-above, .data-row.more-space-above {
        margin-top: 12px;
      }
      .data-row {
        display: flex;
        margin-top: 3px;
        margin-bottom: 3px;
        align-items: baseline;
        .A {
          flex: 0 0 auto;
          width: 30%;
          overflow: hidden;
          white-space: nowrap;
          color: @gray-light;
          font-family: @font-family-monospace;
          font-size: 85%;
          text-transform: uppercase;
        }
        .B {
          flex: 1 1 auto;
          &.multiline-code {
            margin-top: 3px;
          }
        }

        &.nested {
          .A {
            padding-left: 1em;
          }
        }
      }
      .btn-group.right {
        width: 100%;

        > .pull-right {
          float: none;
        }
        > .dropdown-menu {
          width: auto;
          li a {
            padding-left: 2em;
          }
        }

        .selected {
          .check {
            margin-left: -1.5em;
            display: block;
            width: 0;
            height: 0;
            overflow: visible;
            margin-top: 3px;
            margin-bottom: -3px;
          }
        }
        .check {
          display: none;
        }
      }
    }
  }

  .workflow-step-status-indicators {
    //position: absolute;
    //width: 60px;
    //text-align: right;
    //padding-right: 1ex;
    //margin-top: 8px;
    position: absolute;
    width: 60px;
    text-align: right;
    padding-right: 1ex;
    margin-top: 0;
    display: flex;
    gap: 6px;
    margin-top: 3px;
    height: 30px;
    align-items: center;
    justify-content: end;

    .color-succeeded { color: @color-succeeded; }
    .color-failed { color: @color-failed; }
    .color-cancelled { color: @color-cancelled; }
    .color-active { color: @color-active; }

    &.handy {
      cursor: pointer;
    }

    .running-status {
      svg {
        //margin: 0 auto;
        //background: none;
        //display: block;
        //
        width: 18px;
        height: 18px;
        margin-top: 2px;
      }
    }

    i.fa {
      font-size: 20px;
    }

    //// same as entity-effector.less
    //.effector-pill {
    //  background: @gray-lighter;
    //  padding: 2px 6px;
    //  &:first-child {
    //    padding-left: 10px;
    //    border-bottom-left-radius: 12px;
    //    border-top-left-radius: 12px;
    //  }
    //  &:last-child {
    //    padding-right: 10px;
    //    border-bottom-right-radius: 12px;
    //    border-top-right-radius: 12px;
    //  }
    //}
  }

  .simple-code, .multiline-code {
    white-space: pre;
    overflow: scroll;
  }
  .simple-code {
    padding: 3px;
  }
  .multiline-code.multiline-code-resizable {
    resize: vertical;
    height: 100px;
    max-height: max-content;
    border: 1px solid @gray-lighter;
  }
  .multiline-code {
    max-height: 100px;
    padding: 2px;
  }
  .simple-code, .multiline-code, .fixed-width {
    .monospace();
    font-size: 85%;
  }
  .fixed-width {
    overflow: hidden;
  }

  svg.workflow-arrows {
    //opacity: 10%;

    .arrow-failed { stroke: @color-failed; }
    .arrow-future { stroke: @gray-lighter; }

    .fill-failed { fill: @color-failed; }
    .fill-future { fill: @gray-lighter; }
  }
  svg.workflow-arrows:hover {
    opacity: 100%;
  }

}

.dropdown-menu.workflow-dropdown-small {
  min-width: 120px;
  li > a {
    padding: 3px 16px;
    font-size: 12px;
  }
}