src/app/components/apps-view/apps-view.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.
 */

.top-section {
  width: 100%;
  height: 100%;
  display: flex;
  .search-wrapper {
    width: 300px;
    position: absolute;
    right: 20px;
    input {
      width: calc(100% - 22px);
      color: #333;
    }
    .clear-btn {
      outline: none;
      border: none;
      padding: 0 0 0 4px;
      cursor: pointer;
      background: transparent;
      i {
        font-size: 18px;
        &:hover {
          color: #f44336;
        }
      }
    }
    .search-icon {
      margin-left: 4px;
      font-size: 17px;
    }
  }
  .dropdown-wrapper {
    padding-right: 40px;
    .dropdown-label {
      color: #333;
      font-size: 1.2em;
      margin-right: 10px;
    }
  }
}

.apps-view {
  width: 100%;
  height: 100%;
  .mat-mdc-header-cell {
    font-size: 15px;
    font-weight: bold;
    color: #666;
  }
  .mat-mdc-cell {
    color: #333;
  }
  .mat-mdc-row {
    &:hover {
      background: #cccccc;
      cursor: pointer;
    }
    &.selected-row {
      background: #303d54;
      .mat-mdc-cell {
        color: #fff;
      }
    }
  }
  .mat-mdc-header-cell.indicator-icon,
  .mat-mdc-cell.indicator-icon {
    max-width: 40px;
    font-size: 18px;
    margin-left: 10px;
  }
  .app-allocations {
    margin-top: 40px;
    .mat-mdc-table {
      margin-top: 20px;
    }
  }
  .no-record {
    font-size: 14px;
    font-weight: bold;
    color: #666;
    width: 100%;
    text-align: center;
  }
}