web/src/components/Label/Label.module.scss - main - githubmirror/gitness

web/src/components/Label/Label.module.scss

98 строк2 KB

Ritik Kapoor

fix: public repo config and labels flicker (#2571)

28 авг 2024, 11:14

28 авг 2024, 11:1481b10ba

/*
 * Copyright 2023 Harness, Inc.
 *
 * Licensed 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.
 */

.labelTag {
  border: none !important;
  padding: 0px !important;

  .labelKey {
    padding-left: 7px !important;
    padding-right: 7px !important;
    border-radius: 4px 0 0 4px !important;
    background-color: inherit !important;
    display: flex !important;
    align-items: center;
    gap: 4px;
  }

  .labelValue {
    padding: 1px 7px !important;
    border: 1px transparent !important;
    border-radius: 0 4px 4px 0 !important;
    gap: 4px;
    white-space: nowrap !important;

    .labelValueTxt {
      max-width: 150px !important;
    }
  }
  .standaloneKey {
    padding-left: 7px !important;
    padding-right: 7px !important;
    border-radius: 4px !important;
    background-color: var(--grey-0) !important;
    gap: 4px;
  }
}

.removeBtnTag {
  :global {
    .bp3-button {
      cursor: pointer !important;
      --button-height: 15px !important;
      min-width: 16px !important ;
    }
  }
}

.labelKey :global {
  .bp3-tag {
    background-color: inherit !important;
  }
}

.popover {
  border-radius: 8px !important;
}

.danger {
  &:not(.isDark) {
    * {
      color: var(--red-500) !important;
    }
  }

  &:hover {
    background-color: var(--red-500) !important;

    * {
      color: var(--white) !important;
    }
  }
}

.isDark {
  .icon {
    svg path {
      fill: var(--white) !important;
    }
  }
}
.valuesList {
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}