| /* |
| * 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; |
| } |
| } |
