agneta-platform/theme/source/ui/form-steps.styl

Agneta Platform - Integrate and customize business applications

number-width=38px;
number-border=4px;
.ui-form-steps{

  >.header{
    margin-bottom: 20px;
    .numbers{
      border-bottom: solid number-border grey;
      height: number-width*0.5 + number-border;
      margin-bottom: number-width*0.5;
    }
    .number{
      background: white;
      border: solid 2px color-primary;
      color: color-primary;
      width: number-width;
      height: number-width;
      border-radius: 100%;
      line-height: number-width;
      text-align: center;
      font-size: 1.3em;
      margin-left: 20px;

      &.active{
        transform: scale(1.2);
        background: color-primary;
        color: white;
      }

      &:first-child{
        margin-left: 0;
      }
    }
  }

  >.steps{
    position: relative;
    padding: 20px 0;
    >.step{

      height: 0 !important;
      padding: 0;
      margin: 0;
      opacity: 0;
      overflow: hidden;
      transition: opacity 400ms ease, transform 400ms ease;
      transform: scale(0.8);

      &.active{
        transform: scale(1);
        height: initial !important;
        padding: initial;
        margin: initial;
        opacity: 1;
      }
    }
  }

  .balloon{
    position: relative;
    border-radius: 6px;
    padding: 20px 10px;
    margin-top: 20px;
    background: white;
    box-sizing: border-box;

    &:after {
      bottom: 100%;
      left: 50%;
      border: solid transparent;
      border-bottom-color: white;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-width: 10px;
      margin-left: -10px;
    }

    .notice{
      color: color-red;
      font-weight: bold;
    }

    &.red{
      color: white;
      background: color-red;
      font-weight: bold;
      &:after{
        border-bottom-color: color-red;
      }
    }
  }

  .errors{

    .error{
      display: none;
      &.active{
        display: initial;
        .balloon {
          background: color-red;
          color: white;
          &:after {
            border-bottom-color: color-red;
          }
        }
      }


      &.type-view{
        .title{
          color: color-red;
          font-weight: bold;
        }
      }
      .date-range{
        font-size: 1.5em;
        font-weight: bold;
        color: color-primary;
      }
    }
  }

}