web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.prefix.css - develop - vshmidt/label-studio

web/libs/editor/src/components/AnnotationsCarousel/AnnotationsCarousel.prefix.css

116 строк2 KB

Raul Martin

refactor: ECHO-448: Biome - enable format (#9625)

17 мар 2026, 18:27

17 мар 2026, 18:27567cb96

.annotations-carousel {
  --carousel-left: 0;

  position: relative;
  height: 100%;
  align-items: center;
  min-width: 0;
  flex: 1;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
      to right,
      rgba(var(--color-neutral-shadow-raw) / 16%),
      rgba(var(--color-neutral-shadow-raw) / 0%)
    );
    z-index: 1;
    transition: opacity 300ms ease-out;
  }

  &_scrolled {
    &::before {
      opacity: 1;
    }
  }

  &_virtualized {
    .annotations-carousel__container {
      overflow: visible;
    }
  }

  &__container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
    height: 100%;
  }

  &__carosel {
    flex: 1;
    display: flex;
    gap: var(--spacing-tighter);
    white-space: nowrap;
    padding-left: var(--spacing-tighter);
    padding-right: 77px;
    position: relative;
    transform: translateX(calc(-1 * var(--carousel-left)));
    transition: all 200ms ease-out 0s;
  }

  &__carousel-controls {
    position: absolute;
    right: 0;
    white-space: nowrap;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: var(--spacing-tighter);
    padding-right: var(--spacing-tighter);

    & button:not(:disabled) {
      box-shadow: 0 2px 6px rgba(var(--color-neutral-shadow-raw) / 20%);
    }
  }

  &__nav {
    padding: 0;
    height: 28px;
    width: 28px;
    box-shadow: 0 2px 5px 0 rgb(var(--color-neutral-shadow-raw) / 20%);

    &:hover {
      background: var(--color-primary-emphasis-subtle);
      box-shadow: 0 2px 5px 0 rgb(var(--color-neutral-shadow-raw) / 20%);
    }

    &_disabled {
      background: var(--color-background-surface);

      & svg {
        opacity: 0.4;
      }

      &:hover {
        background: var(--color-neutral-surface);
        filter: none;
      }
    }

    .button {
      &:hover {
        filter: none;
      }

      &__arrow {
        &_left {
          transform: rotate(-90deg);
        }

        &_right {
          transform: rotate(90deg);
        }
      }
    }
  }
}