coriolis-web/src/components/ExecutionsTimeline/ExecutionsTimeline.scss

/*
Copyright (C) 2017  Cloudbase Solutions SRL

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

@import '../variables.scss';

.root {
  position: relative;
  padding: 8px 0 40px;
  .line {
    background-color: $execution-line-color;
    height: 2px;
    width: 100%;
    position: absolute;
    .progress {
      color: $blue;
      height: 2px;
      width: 0px;
    }
  }
  .executionDot {
    position: absolute;
    width: 88px;
    margin-left: -44px;
    margin-top: -8px;
    text-align: center;
    transition: all 0.3s ease-out;
    cursor: pointer;
    :global(.taskIcon) {
      float: none;
      margin: 0 auto;
      transition: transform $animation-swift-out;
    }
    &.current {
      font-weight: 500;
      :global(.taskIcon) {
        width: 20px;
        height: 20px;
        background-size: cover;
      }
    }
    &:hover {
      :global(.taskIcon) {
        transform: scale(1.2);
      }
      &.current {
        :global(.taskIcon) {
          transform: scale(1);
        }
      }
    }
  }
  .caretLeft {
    position: absolute;
    cursor: pointer;
    top: -12px;
    left: -24px;
    opacity: 0;
    transition: opacity $animation-swift-out;
    padding: 8px;
  }
  .caretRight {
    position: absolute;
    cursor: pointer;
    top: -12px;
    right: -24px;
    opacity: 0;
    transition: all $animation-swift-out;
    padding: 8px;
    transform: rotate(180deg);
  }
  &:hover {
    .caretLeft {
      opacity: 1;
    }
    .caretRight {
      opacity: 1;
    }
  }
}