config-ui/src/styles/connections.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.

.addConnection, .editConnection, .configureConnection {
  .formContainer {
    max-width: 100%;
  }

  .bp3-form-group {
    display: flex;
    max-width: none;
    margin-bottom: 10px;
    
    &.bp3-inline {
      .bp3-form-content {
        .bp3-input-group, .connection-tokens-personal-group {
          margin-left: 0.75rem;
        }

        .connection-tokens-personal-group {
          .bp3-input-group {
            margin-left: 0;
          }
        }
      }
    }

    .bp3-form-content {
      width: 100%;
      // @todo REVISE THESE RULES!
      max-width: 100%;
      // min-width: 600px;
      display: flex;
      .bp3-label {}
    }

    .bp3-input-group {
      display: flex;
      // width: 440px;
      // min-width: 440px;
      // max-width: 440px;    
      // max-width: 600px;
      .bp3-input {
        flex: 1;
      }

      &.connection-name-input {
        .bp3-input {
          &:read-only {
            background-color: #ffffee;
            font-weight: bold;
          }
        }
        svg[data-icon="lock"] {
          width: 10px;
          height: 10px;
          margin-top: 2px;
        }
      }      
    }

    .bp3-form-helper-text {
      margin-top: 2px;
      margin-right: 10px;
      margin-left: 5px;
      min-width: 80px;
      display: flex;
      justify-content: flex-start;
      padding-right: 25px;
    }

    label {
      display: flex;
      min-width: 150px;
      max-height: 30px;
      text-align: right;
      font-weight: bold;
    }
  }

  .btn-test-connection, .btn-cancel, .btn-save {
    margin-right: 5px;
    margin-bottom: 5px;
    white-space:nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

}

.configureConnection {
  .bp3-form-group {
    .bp3-form-content {
      // max-width: 80%;
    }
  }

}

.node-id-tag {
  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 1px 3px;
  font-size: 10px;

  &.tag-from {
    &:hover {
      background-color: #eeeeee;
      color: #444444;
    }
  }

  &.tag-to {
    &:hover {
      // background-color:(lighten($pt-intent-danger, 15%));
    }
  }


}

.connections-table {
  tr {
    td {
      &.cell-name {
        white-space: nowrap;
        cursor: pointer;
      }       
      &.cell-endpoint {
        white-space: nowrap;
        overflow: hidden;
        a { text-overflow: ellipsis; }
      } 
      &.cell-status {
        white-space: nowrap;
      }     
      &.cell-actions {
        white-space: nowrap;
      }         
    }
  }
}

.bp3-popover-wrapper {
  &.popover-generate-token, &.popover-delete-connection, &.trigger-delete-connection {
    width: auto;
  }

  .popover-delete-connection {
    max-width: 280px;
    white-space: normal;
    overflow: hidden;

    h3 {
      margin: 0 0 8px 0;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      color: rgba(219, 55, 55, 0.9);
      font-size: 17px;
    }

    .bp3-popover-content {
      white-space: normal;
    }
  }

  &.trigger-delete-connection {
    .bp3-popover-target {
      width: auto;
    }
  }
}

.app-error-card.bp3-elevation-0 {
  box-shadow: none;
}

.confirmation-text {

  strong {
    font-size: 14px;
    font-weight: 800;
    color: rgb(219, 55, 55);
  }
}