bigtop-manager-ui/src/styles/index.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
 *
 *    https://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.
 */

* {
  outline: 0;
}

html {
  --text-color: rgba(0, 0, 0, 0.85);
  --text-color-desc: rgba(0, 0, 0, 0.45);
  --bg-color: #fff;
  --hover-color: rgba(0, 0, 0, 0.05);
  --bg-color-container: #f0f2f5;
  --c-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

.m-0 {
  margin: 0;
}

.p-0 {
  padding: 0;
}

.hidden {
  display: none;
}

.ant-table-body {
  overflow-y: auto !important;
}

#app {
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
}

.header-item {
  height: $layout-header-height;
  border-radius: 0;
  box-sizing: border-box;
  padding: 0 16px;
  cursor: pointer;
  @include flexbox($justify: center, $align: center);

  &:hover {
    background-color: var(--color-primary);
  }

  :deep(.svg-icon) {
    width: 20px;
    height: 20px;
  }
}

// temp resolve error on console
.ant-modal div[aria-hidden='true'] {
  display: none !important;
}

.header-title {
  font-weight: 500;
  margin-bottom: $space-md;
}

:where(.ant-modal-confirm-content) {
  max-width: 100% !important;
}

:where(.ant-modal-header) {
  margin-bottom: 24px !important;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  position: relative;
}

.job-progress-notification {
  &:hover {
    background-color: $color-bg-layout;
    cursor: pointer;
  }
  .ant-notification-notice-close {
    top: 16px !important;
  }
  :where(.ant-notification-notice-content) {
    .ant-notification-notice-message,
    .ant-notification-notice-description {
      margin-left: 50px !important;
      margin-bottom: 0 !important;
      padding-inline-end: calc(24px / 2);
      .ant-progress-line {
        margin-bottom: 6px !important;
      }
    }

    .ant-notification-notice-message {
      font-size: 14px !important;
      font-weight: 500 !important;
    }

    .ant-notification-notice-icon {
      top: 50%;
      transform: translateY(-50%);
      margin: auto;
    }
  }
}

.text-loading::after {
  content: '';
  display: inline-block;
  animation: loading-dots 1.5s infinite;
}

@keyframes loading-dots {
  0% {
    content: '';
  }
  16% {
    content: '.';
  }
  32% {
    content: '..';
  }
  48% {
    content: '...';
  }
  80% {
    content: '....';
  }
  96% {
    content: '.....';
  }
  100% {
    content: '......';
  }
}

.svg-icon {
  height: 1.2em;
  width: 1.2em;
  margin: 0 6px;
  vertical-align: -0.25em;
  overflow: hidden;
  flex-shrink: 0;
}