config-ui/src/styles/blueprints.scss

// 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-bar {
  margin: 0;
  padding: 0;
  position: relative;
  white-space: nowrap;
  border: 0;
  outline: none;
  min-width: 740px;
  display: flex;
  justify-content: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .workflow-steps {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
    white-space: nowrap;

    &:after {
      position: absolute;
      z-index: -1;
      margin: 32px auto;
      top: 0;
      left: 11%;
      width: 76%;
      height: 2px;
      background-color: #bdcefb;
      font-size: 0;
      display: flex;
      align-self: center;
      justify-self: center;
      content: '';
    }

    & > li {
      float: left;
      margin: 10px 20px;
      list-style: none;
      display: flex;
      flex-direction: column;
      transition: all 0.3s ease;
      color: #70727f;
      font-weight: 600;

      &.active {
        // color: darken(#656774, 20%);

        > a {
          background-color: #7497f7;
          color: #ffffff;
          font-weight: bold;
        }

        &:hover {
          > a {
            background-color: #5b80e4;
          }
        }
      }

      &.is-completed {
        > a {
          background-color: #74f7a0;
          color: #ffffff;
        }
      }

      &:hover {
        > a {
          background-color: #dee2ec;
        }
      }

      > a {
        cursor: default;
        margin: 5px auto;
        width: 32px;
        height: 32px;
        line-height: 26px;
        display: block;
        border-radius: 32px;
        background-color: #f0f4fe;
        border: 3px solid #ffffff;
        color: #7497f7;
        text-align: center;
        text-decoration: none;
        outline: none;
        transition: all 0.3s ease;
        overflow: hidden;
      }
    }
  }
}

.workflow-content {
  display: flex;
  flex-direction: column;
  align-self: center;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
  max-width: 700px;
  min-width: 700px;
  min-height: 400px;
  margin-top: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  &.workflow-step-id-3 {
    margin-top: 8px;
  }

  > .workflow-step {
    display: block;
    width: 100%;
  }

  p {
    a {
      color: #7497F7;
      text-decoration: underline;
      transition: all 0.3s ease;
      
      &.no-underline {
        text-decoration: none;
      }

      &:hover {
        text-decoration: none;
        color: darken(#7497F7, 10%)
      }
    }
  }
}

.workflow-actions {
  display: flex;
  width: 100%;
  max-width: 700px;
  justify-content: space-between;
  margin-top: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bp3-card {
  &.workflow-card {
    margin-bottom: 24px;
    border-radius: 8px;

    h3 {
      font-size: 15px;
    }
    
    h4 {
      font-size: 14px;
      margin-bottom: 6px;
    }
    
    h5 {
      font-size: 12px;
      margin-bottom: 4px;
    }

    p {
      color: #94959f;
    }
  }
}

.bp3-divider {
  &.section-divider {
    margin: 12px 0;
  }
}

.bp3-tabs {
  &.connection-tabs {
    > .bp3-tab-list {
      display: flex;
      width: 100%;
      
      > .bp3-tab {
        border: 0;
        font-size: 14px;
        box-sizing: border-box;
        display: flex;
        width: 100%;

        &[aria-selected='true'] {
          font-weight: bold;
          color: #7497f7;
          border-left: 2px solid #7497f7;
        }
      }
    }
  }
}

.bp3-form-group {
  &.formGroup-full {
    width: 100%;
    > .bp3-form-content {
      width: 100%;
    }
  }
}

.bp3-dialog {
  &.dialog-manage-connection {
    .bp3-dialog-header {
      h4.bp3-heading {
        font-size: 16px;
      }

      .bp3-icon {
        svg {
          width: 15px;
          height: 15px;
        }
      }
    }
    .bp3-form-group {
      margin: 0 0 8px;
      flex: 1;

      label {
        font-weight: bold;
        &.normal {
          font-weight: normal;
        }
      }
      
      .bp3-form-content {
        flex: 1;
      }
    }
  }
  &.dialog-view-pipeline {
    width: auto;
    min-width: 500px;
  }
}

.connections-multiselect-selector {
  .bp3-input.bp3-multi-select {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

.transformation-settings {
  .bp3-form-group {
    &.bp3-inline {
      label.bp3-label {
        min-width: 130px;
      }
    }
    
    .bp3-form-content {
      flex: 1;
    }
  }
}

p.alert {
  font-size: 12px;
  margin: 0 0 10px 0;
  padding: 8px;
  border-radius: 6px;
  color: #888888;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  
  > a {
    color: #777777
  }

  &.neutral {
    color: #3C5088;
    background-color: #F0F4FE;
    border: 1px solid #BDCEFB;

    > a {
      color: #7497F7;
    }
  }

  &.info {

  }

  &.warning {

  }

  &.error {
    background-color: #fef0f0;
    border: 1px solid #fbbebe;
    color: #d43d3d;

    > a {
      color: darken(#d43d3d, 10%)
    }
  }
}

h4 {
  &.status-task_created {
    color: #94959F;
  }
  &.status-task_cancelled {
    color: #94959F;
  }
  &.status-task_running {
    color: #7497F7;
  }
  &.status-task_failed {
    color: #E34040;
  }
  &.status-task_completed {
    color: #4DB764;
  }
}

.stage-header {
  &.complete {
    background-color: #EDFBF0;
    color: #4DB764
  }
  &.failed {
    background-color: #FEEFEF;
    color: #E34040;
  }
  &.active {
    background-color: #F0F4FE;
    color: #7497F7;
  }
  &.pending {
    background-color: #F9F9FA;
    color: #94959F;
  }
  &.cancelled {
    background-color: #F9F9FA;
    color: #94959F;
  }
}