@oceanbase/ui/es/SideTip/index.less

The UI library based on OceanBase Design

@import '../variable.less';

@prefix: ob-sidetip;

.@{prefix}-container {
  position: fixed;
  z-index: 0;
  font-size: 14px;
  cursor: pointer;
  inset-inline-end: 24px;
  inset-block-end: 24px;

  &.@{prefix}-container-dragged {
    cursor: grab;
  }

  &.@{prefix}-container-hide {
    transition: all 0.3s;
  }

  @media screen and (max-width: 768px) {
    display: none;
  }

  &.@{prefix}-container-hide-not-dragged:hover {
    inset-inline-end: 0 !important;
  }

  .@{prefix}-hide {
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    transform: scale(0);
    cursor: pointer;
    opacity: 0;
    transition: all 0.18s ease-out 0.18s;
    inset-block-start: 0;
    inset-inline-end: -22px;

    &:hover {
      background: rgba(0, 0, 0, 0.35);
    }

    .@{prefix}-hide-icon {
      width: 6px;
      height: 2px;
      background: #fff;
      border-radius: 4px;
    }

    &.@{prefix}-hide-hovered {
      transform: scale(1);
      opacity: 1;
    }
  }

  .@{prefix}-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: @boxShadowSecondary;
    cursor: pointer;
    transition:
      background-color 0.2s ease 0.1s,
      opacity 0.2s ease 0s,
      transform 0.2s ease 0.1s;
    user-select: none;

    &.@{prefix}-button-primary {
      background-color: #006aff;
    }

    &.@{prefix}-button-small {
      width: 40px;
      height: 40px;
    }

    &.@{prefix}-button-disabled {
      background-color: @colorTextQuaternary;
    }

    &:hover {
      opacity: 1;
    }

    .@{prefix}-button-loading {
      position: absolute;
      width: 56px;
      height: 56px;
      color: #006aff;
      font-size: 56px;
      inset-block-start: 0;
      inset-inline-end: 0;

      &.@{prefix}-button-loading-primary {
        color: #fff;
      }

      &.@{prefix}-button-loading-small {
        width: 40px;
        height: 40px;
        font-size: 40px;
      }
    }

    .@{prefix}-button-close {
      position: absolute;
      width: 24px;
      height: 24px;
      color: @colorTextSecondary;
      font-size: 24px;
      transform: translateY(-50%) scale(0.4) rotate(-45deg);
      opacity: 0;
      transition: all 0.3s linear;
      user-select: none;
      inset-block-start: 50%;

      &.@{prefix}-button-close-primary {
        color: #fff;
      }

      &.@{prefix}-button-close-show {
        transform: translateY(-50%);
        opacity: 1;
      }

      &.@{prefix}-button-close-small {
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
      }
    }

    .@{prefix}-button-icon {
      position: absolute;
      width: 24px;
      height: 24px;
      color: @colorTextSecondary;
      font-size: 24px;
      line-height: 24px;
      transform: translateY(-50%);
      opacity: 1;
      transition: all 0.3s linear;
      user-select: none;
      inset-block-start: 50%;

      &.@{prefix}-button-icon-open {
        transform: translateY(-50%) scale(0.4) rotate(45deg);
        opacity: 0;
      }

      &.@{prefix}-button-icon-disabled {
        color: @colorTextQuaternary;
      }

      &.@{prefix}-button-icon-primary {
        color: #fff;
      }

      &.@{prefix}-button-icon-small {
        width: 16px;
        height: 16px;
        font-size: 16px;
        line-height: 16px;
      }
    }
  }
}