ze-react-component-library/es/ZEFloatRecordButton/index.less

ZeroETP React Component Library

@import "~antd/es/style/themes/variable.less";

.ze-float-record-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
}
.ze-float-record-btn-tip {
  background: #f6f7f9;
  font-size: 12px;
  height: 44px;
  border-radius: 22px;
  width: 193px;
  text-align: center;
  line-height: 44px;
  color: var(--ant-primary-color);
  margin-right: 24px;
  .anticon {
    margin-right: 8px;
  }
}
.ze-float-record-btn-inner {
  position: relative;
  .circles-wrapper {
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: -1;
    @keyframes growAndFade {
      0% {
        opacity: 0.4;
        transform: scale(0);
      }
      100% {
        opacity: 0;
        transform: scale(1);
      }
    }
    .circles {
      height: 10vw;
      position: relative;
      width: 10vw;

      > div {
        animation: growAndFade 3s infinite ease-out;
        background-color: var(--ant-primary-color);
        border-radius: 50%;
        height: 100%;
        opacity: 0;
        position: absolute;
        width: 100%;
      }

      .circle1 {
        animation-delay: 0s;
      }
      .circle2 {
        animation-delay: 1s;
      }
      .circle3 {
        animation-delay: 2s;
      }
    }
  }
  .ze-float-record-btn-inner-main {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--ant-primary-color);
    width: 4.6vw;
    height: 4.6vw;
    border-radius: 2.3vw;
    @shadowColor: var(--ant-primary-color-outline);
    box-shadow: 0 6px 8px 0 @shadowColor, 0 6px 16px 0 @shadowColor;
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    .anticon {
      font-size: 2.2vw;
      pointer-events: none;
    }
  }
}