tez-ui/src/main/webapp/app/styles/em-swimlane.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.
 */

@process-height: 30px;
@event-anim-duration: .2s;

.em-swimlane {
  position: relative;

  margin: 5px 0px 40px 0px;

  .process-names {
    width: 100px;
    border-right: 1px solid @border-color;

    .consolidated-view-label {
      margin-top: 20px;
      padding-bottom: 10px;
    }
  }
  .process-visuals {
    .force-scrollbar;

    position: absolute;
    left: 100px;
    right: 0px;
    top: 0px;
    overflow: auto;

    .consolidated-view {
      position: relative;
      margin: 20px 10px 2px 10px;
      height: 20px;
      border: 1px solid @border-color;
      border-radius: 2px;
    }
  }

  .em-swimlane-ruler {
    margin: 9px 10px 5px 10px;

    .ruler-line {
      margin: 0px -10px 0px -10px;
      border-top: 1px solid @border-color;
    }

    .unit-text {
      display: inline-block;
      position: relative;
      transition: left .5sec ease-out;
    }

    .mark-container {
      overflow: hidden;
      font-size: 0;
      overflow: hidden;
      white-space: nowrap;

      .ruler-mark {
        display: inline-block;
        border-left: 1px solid @border-color;

        margin-right: -1px;
        margin-bottom: -2px;

        font-size: 12px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .sub-marks {
          display: block;
          padding: 0px;

          margin-bottom: -8px;

          li {
            vertical-align: top;
            display: inline-block;
            width: 10%;
            height: 5px;
            border-left: 1px solid @border-lite;

            &:first-child {
              border-left: none;
            }

            &:nth-child(2n) {
              height: 8px;
            }
            &:nth-child(6) {
              height: 12px;
            }
          }
        }
      }
    }

  }
}

.em-swimlane-consolidated-process {
  position: absolute;
  cursor: pointer;

  top: 0px;
  bottom: 0px;
  border: 1px solid white;

  transition: top .2s;
  &.focused {
    top: -10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
}

.em-swimlane-process-name {
  text-align: right;
  padding-right: 5px;
  padding-top: 5px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  height: 30px;
}

.em-swimlane-process-visual {
  position: relative;
  height: 30px;

  // Gives a mouse sensitive margin to the left and right,
  // so that event lines appear with a padding
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;

  .process-line, .event-bar, .event-bubble {
    cursor: pointer;
  }
  .base-line {
    position: relative;
    height: 1px;
    margin: 0px -10px;
    top: unit(unit(@process-height) * 0.5, get-unit(@process-height));
    border-top: 1px dotted @border-color;
  }

  .process-line, .event-bar, .em-swimlane-event, .em-swimlane-blocking-event {
    position: absolute;
  }

  .process-line {
    top: unit(unit(@process-height) * 0.5 - 1, get-unit(@process-height));
    height: 3px;

    left: 0%;
    right: 100%;
    transition: left @event-anim-duration ease-out, right @event-anim-duration ease-out;
  }

  .event-bar {
    top: unit((unit(@process-height) * 0.5) - 10, get-unit(@process-height));
    height: 20px;
    background-color: @border-lite;
    border-radius: 2px;
    border: 1px solid;
    margin-right: -1px;

    left: 0%;
    right: 100%;
    transition: left @event-anim-duration ease-out, right @event-anim-duration ease-out;
  }

  .em-swimlane-event {
    top: unit(unit(@process-height) * 0.5, get-unit(@process-height));

    left: 0%;
    transition: left @event-anim-duration ease-out;

    .event-line {
      position: absolute;
      top: -9px;
      height: 18px;
      border-left: 1px solid;
    }

    .event-bubble {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      -webkit-transition: top .2s, right .2s, bottom .2s, left .2s, border-width .2s; /* Safari */
      transition: top .2s, right .2s, bottom .2s, left .2s, border-width .2s;
      transition-timing-function: cubic-bezier(1.44);

      border-radius: 7px;
      border: 0px solid;
      background-color: white;
    }
  }

  .em-swimlane-blocking-event {
    top: unit(unit(@process-height) * 0.5, get-unit(@process-height));

    left: 0%;
    height: 0;
    transition: left @event-anim-duration ease-out, height @event-anim-duration ease-out;

    .event-line {
      position: absolute;
      top: 0px;
      border-left: 1px solid;
    }
  }

  &:hover {
    .event-bubble {
      top: -7px;
      right: -8px;
      bottom: -8px;
      left: -7px;

      border: 2px solid;
    }
  }
}