services/self-service/src/main/resources/webapp/src/app/resources/exploratory/install-libraries/libraries-info.component.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.
 */

.install-libraries {
  height: 100%;
  padding-bottom: 110px;

  .dialog-header {
    padding-left: 25px;
  }

  .dialog-content {
    height: calc(100% - 50px);
  }

  .info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .mat-list-item {
    height: auto !important;
    font-family: "Open Sans", sans-serif;
    color: #718ba6 !important;
    font-size: 13px !important;
    font-weight: 300;

    .mat-list-item-content {
      height: auto !important;
      min-height: 54px !important;
      border-bottom: 1px solid #edf1f5;
      padding-right: 10px;
      padding-left: 0;
    }
  }

  .lib-view-wrap {
    display: flex;
    flex-direction: column;
  }

  .error {
    padding: 15px 20px;
  }

  .uploading {
    margin: 0 auto;
  }

  .list-selected {
    padding: 10px;
    font-family: 'Open Sans', sans-serif;
    height: 130px;
    overflow-y: auto;

    h4 {
      margin-bottom: 20px;
      font-size: 14px;
      text-align: center;
      font-weight: 400;
      color: #718ba6;
    }

    mat-chip-list .mat-chip-list-wrapper {
      overflow-y: auto;
      padding: 3px;
    }
  }

  .loading-block {
    height: 40%;
    display: flex;
    justify-content: center;

    .uploading {
      padding-top: 200px;
      flex-direction: column;
      align-items: center;
      align-self: center;
      list-style: none;
      display: flex;

      p {
        font-size: 16px;
      }
    }
  }

  .list-header{
    line-height: 40px;
  }
}

.libs-info {
  padding: 0 25px;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;

  .filter-row {
    .filter-col{
      padding-left: 0;
      &.lib-name{
        padding-left: 5px;
        .filter-field{
          padding-left: 15px;
        }
      }
      .status{
        text-transform: none;
      }
    }
  }

  .mat-list {

    .list-header{
      line-height: 40px;
      position: sticky;
      top: 0;
      z-index: 99;
      background-color: #fff;
    }

    .filter-row{
      position: sticky;
      top: 56px;
      z-index: 99;
      background-color: #fff;
    }


    .scrollingList {
      .info {
        p {
          text-align: center;
          padding: 40px;
        }
      }
    }
  }

  .lib-name {
    width: 27%;
    padding-right: 10px;
    padding-left: 20px;

    &-col{
      display: flex;
    }

    .lib-name-wrapper{
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
    }

    strong {
      font-weight: 400;
    }
  }

  .lib-group,
  .lib-destination {
    width: 17%;
    padding-left: 15px;
    padding-right: 10px;
  }

  .lib-status {
    width: 17%;
    padding-left: 15px;
    padding-right: 10px;
  }

  .lib-resource-type {
    width: 17%;
    padding-left: 15px;
    padding-right: 10px;
  }

  .lib-group-col {
    width: 17%;
    padding-left: 17px;
    padding-right: 10px;
  }

  .st-group {
    display: flex;
    flex-direction: column;
    width: 51%;

    .wrap-col {
      display: flex;
      padding: 5px 0px;

      .lib-destination-col {
        width: 33.3%;
        padding-left: 15px;
      }

      .lib-resource-type-col {
        width: 33.3%;
        color: #36afd5;
        padding-left: 15px;
      }

      .lib-status-col {
        position: relative;
        width: 33.3%;
        padding-left: 15px;

        .warn-action {
          position: absolute;
          top: -3px;
          right: -50px;

          div {
            display: inline-block;
            cursor: pointer;
            width: 25px;
            pointer-events: auto;

            span {
              display: block;
            }
          }

          .lib-error {
            color: #35afd5;
          }
        }
      }
    }
  }
}