maycur-business/lib/Tippy/style/Tippy.less

maycur business react components of web

@import '../../style/variables.less';

  .@{prefix}-tippy-touch {
    cursor: pointer!important;
  }
  .@{prefix}-tippy-notransition {
    transition: none!important;
  }
  .@{prefix}-tippy-popper {
    max-width: 400px;
    -webkit-perspective: 800px;
    perspective: 800px;
    z-index: 9999;
    outline: 0;
    transition-timing-function: cubic-bezier(.165,.84,.44,1);
    pointer-events: none;
    overflow: hidden;
    
    &.html-template {
      max-width: 96%;
      max-width: calc(100% - 20px);
    }
    .tippy-tooltip {
      &.transparent-theme {
        background-color: rgba(0,0,0,.7);
      }
      &.transparent-theme[data-animatefill] {
        background-color: transparent;
      }
      &.light-theme {
        color: #26323d;
        box-shadow: 0 4px 20px 4px rgba(0,20,60,.1),0 4px 80px -8px rgba(0,20,60,.2);
        background-color: #fff;
      }
      &.light-theme[data-animatefill] {
        background-color: transparent;
      }
    }
  }
  .@{prefix}-tippy-popper[x-placement^=top] {
    [x-arrow] {
      border-top: 7px solid #333;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      bottom: -7px;
      margin: 0 9px;
    }
    [x-arrow].arrow-small {
      border-top: 5px solid #333;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      bottom: -5px;
    }
    [x-arrow].arrow-big {
      border-top: 10px solid #333;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      bottom: -10px;
    }
    [x-circle] {
      -webkit-transform-origin: 0 33%;
      transform-origin: 0 33%;
    }
    [x-circle].enter {
      -webkit-transform: scale(1) translate(-50%,-55%);
      transform: scale(1) translate(-50%,-55%);
      opacity: 1;
    }
    [x-circle].leave {
      -webkit-transform: scale(.15) translate(-50%,-50%);
      transform: scale(.15) translate(-50%,-50%);
      opacity: 0;
    }
    .tippy-tooltip {
      &.light-theme {
        [x-circle] {
          background-color: #fff;
        }
        [x-arrow] {
          border-top: 7px solid #fff;
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-top: 5px solid #fff;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-top: 10px solid #fff;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }
      }
      &.transparent-theme {
        [x-circle] {
          background-color: rgba(0,0,0,.7);
        }
        [x-arrow] {
          border-top: 7px solid rgba(0,0,0,.7);
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-top: 5px solid rgba(0,0,0,.7);
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-top: 10px solid rgba(0,0,0,.7);
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }
      }
    }
    [data-animation=perspective] {
      -webkit-transform-origin: bottom;
      transform-origin: bottom;
    }
    [data-animation=perspective].enter {
      opacity: 1;
      -webkit-transform: translateY(-10px) rotateX(0);
      transform: translateY(-10px) rotateX(0);
    }
    [data-animation=perspective].leave {
      opacity: 0;
      -webkit-transform: translateY(0) rotateX(90deg);
      transform: translateY(0) rotateX(90deg);
    }
    [data-animation=fade].enter {
      opacity: 1;
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    [data-animation=fade].leave {
      opacity: 0;
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    [data-animation=shift].enter {
      opacity: 1;
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
    [data-animation=shift].leave {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    [data-animation=scale].enter {
      opacity: 1;
      -webkit-transform: translateY(-10px) scale(1);
      transform: translateY(-10px) scale(1);
    }
    [data-animation=scale].leave {
      opacity: 0;
      -webkit-transform: translateY(0) scale(0);
      transform: translateY(0) scale(0);
    }
  }
  .@{prefix}-tippy-popper[x-placement^=bottom] {
    [x-arrow] {
      border-bottom: 7px solid #333;
      border-right: 7px solid transparent;
      border-left: 7px solid transparent;
      top: -7px;
      margin: 0 9px;
    }
    [x-arrow].arrow-small {
      border-bottom: 5px solid #333;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      top: -5px;
    }
    [x-arrow].arrow-big {
      border-bottom: 10px solid #333;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      top: -10px;
    }
    [x-circle] {
      -webkit-transform-origin: 0 -50%;
      transform-origin: 0 -50%;
    }
    [x-circle].enter {
      -webkit-transform: scale(1) translate(-50%,-45%);
      transform: scale(1) translate(-50%,-45%);
      opacity: 1;
    }
    [x-circle].leave {
      -webkit-transform: scale(.15) translate(-50%,-5%);
      transform: scale(.15) translate(-50%,-5%);
      opacity: 0;
    }
    .tippy-tooltip {
      &.light-theme {
        [x-circle] {
          background-color: #fff;
        }
        [x-arrow] {
          border-bottom: 7px solid #fff;
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-bottom: 5px solid #fff;
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-bottom: 10px solid #fff;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }
      }
      &.transparent-theme {
        [x-circle] {
          background-color: rgba(0,0,0,.7);
        }
        [x-arrow] {
          border-bottom: 7px solid rgba(0,0,0,.7);
          border-right: 7px solid transparent;
          border-left: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-bottom: 5px solid rgba(0,0,0,.7);
          border-right: 5px solid transparent;
          border-left: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-bottom: 10px solid rgba(0,0,0,.7);
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
        }
      }
    }
    [data-animation=perspective] {
      -webkit-transform-origin: top;
      transform-origin: top;
    }
    [data-animation=perspective].enter {
      opacity: 1;
      -webkit-transform: translateY(10px) rotateX(0);
      transform: translateY(10px) rotateX(0);
    }
    [data-animation=perspective].leave {
      opacity: 0;
      -webkit-transform: translateY(0) rotateX(-90deg);
      transform: translateY(0) rotateX(-90deg);
    }
    [data-animation=fade].enter {
      opacity: 1;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
    }
    [data-animation=fade].leave {
      opacity: 0;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
    }
    [data-animation=shift].enter {
      opacity: 1;
      -webkit-transform: translateY(10px);
      transform: translateY(10px);
    }
    [data-animation=shift].leave {
      opacity: 0;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
    [data-animation=scale].enter {
      opacity: 1;
      -webkit-transform: translateY(10px) scale(1);
      transform: translateY(10px) scale(1);
    }
    [data-animation=scale].leave {
      opacity: 0;
      -webkit-transform: translateY(0) scale(0);
      transform: translateY(0) scale(0);
    }
  }
  .@{prefix}-tippy-popper[x-placement^=left] {
    [x-arrow] {
      border-left: 7px solid #333;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      right: -7px;
      margin: 6px 0;
    }
    [x-arrow].arrow-small {
      border-left: 5px solid #333;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      right: -5px;
    }
    [x-arrow].arrow-big {
      border-left: 10px solid #333;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      right: -10px;
    }
    [x-circle] {
      -webkit-transform-origin: 50% 0;
      transform-origin: 50% 0;
    }
    [x-circle].enter {
      -webkit-transform: scale(1) translate(-50%,-50%);
      transform: scale(1) translate(-50%,-50%);
      opacity: 1;
    }
    [x-circle].leave {
      -webkit-transform: scale(.15) translate(-50%,-50%);
      transform: scale(.15) translate(-50%,-50%);
      opacity: 0;
    }
    .tippy-tooltip {
      &.light-theme {
        [x-circle] {
          background-color: #fff;
        }
        [x-arrow] {
          border-left: 7px solid #fff;
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-left: 5px solid #fff;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-left: 10px solid #fff;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
      &.transparent-theme {
        [x-circle] {
          background-color: rgba(0,0,0,.7);
        }
        [x-arrow] {
          border-left: 7px solid rgba(0,0,0,.7);
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-left: 5px solid rgba(0,0,0,.7);
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-left: 10px solid rgba(0,0,0,.7);
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
    }
    [data-animation=perspective] {
      -webkit-transform-origin: right;
      transform-origin: right;
    }
    [data-animation=perspective].enter {
      opacity: 1;
      -webkit-transform: translateX(-10px) rotateY(0);
      transform: translateX(-10px) rotateY(0);
    }
    [data-animation=perspective].leave {
      opacity: 0;
      -webkit-transform: translateX(0) rotateY(-90deg);
      transform: translateX(0) rotateY(-90deg);
    }
    [data-animation=fade].enter {
      opacity: 1;
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
    [data-animation=fade].leave {
      opacity: 0;
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
    [data-animation=shift].enter {
      opacity: 1;
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
    [data-animation=shift].leave {
      opacity: 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    [data-animation=scale].enter {
      opacity: 1;
      -webkit-transform: translateX(-10px) scale(1);
      transform: translateX(-10px) scale(1);
    }
    [data-animation=scale].leave {
      opacity: 0;
      -webkit-transform: translateX(0) scale(0);
      transform: translateX(0) scale(0);
    }
  }
  .@{prefix}-tippy-popper[x-placement^=right] {
    [x-arrow] {
      border-right: 7px solid #333;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      left: -7px;
      margin: 6px 0;
    }
    [x-arrow].arrow-small {
      border-right: 5px solid #333;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      left: -5px;
    }
    [x-arrow].arrow-big {
      border-right: 10px solid #333;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      left: -10px;
    }
    [x-circle] {
      -webkit-transform-origin: -50% 0;
      transform-origin: -50% 0;
    }
    [x-circle].enter {
      -webkit-transform: scale(1) translate(-50%,-50%);
      transform: scale(1) translate(-50%,-50%);
      opacity: 1;
    }
    [x-circle].leave {
      -webkit-transform: scale(.15) translate(-50%,-50%);
      transform: scale(.15) translate(-50%,-50%);
      opacity: 0;
    }
    .tippy-tooltip {
      &.light-theme {
        [x-circle] {
          background-color: #fff;
        }
        [x-arrow] {
          border-right: 7px solid #fff;
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-right: 5px solid #fff;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-right: 10px solid #fff;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
      &.transparent-theme {
        [x-circle] {
          background-color: rgba(0,0,0,.7);
        }
        [x-arrow] {
          border-right: 7px solid rgba(0,0,0,.7);
          border-top: 7px solid transparent;
          border-bottom: 7px solid transparent;
        }
        [x-arrow].arrow-small {
          border-right: 5px solid rgba(0,0,0,.7);
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
        }
        [x-arrow].arrow-big {
          border-right: 10px solid rgba(0,0,0,.7);
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
    }
    [data-animation=perspective] {
      -webkit-transform-origin: left;
      transform-origin: left;
    }
    [data-animation=perspective].enter {
      opacity: 1;
      -webkit-transform: translateX(10px) rotateY(0);
      transform: translateX(10px) rotateY(0);
    }
    [data-animation=perspective].leave {
      opacity: 0;
      -webkit-transform: translateX(0) rotateY(90deg);
      transform: translateX(0) rotateY(90deg);
    }
    [data-animation=fade].enter {
      opacity: 1;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
    [data-animation=fade].leave {
      opacity: 0;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
    [data-animation=shift].enter {
      opacity: 1;
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
    [data-animation=shift].leave {
      opacity: 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    [data-animation=scale].enter {
      opacity: 1;
      -webkit-transform: translateX(10px) scale(1);
      transform: translateX(10px) scale(1);
    }
    [data-animation=scale].leave {
      opacity: 0;
      -webkit-transform: translateX(0) scale(0);
      transform: translateX(0) scale(0);
    }
  }
  .@{prefix}-tippy-tooltip {
    position: relative;
    color: #fff;
    // border-radius: 4px;
    // font-size: .95rem;
    padding: 6px 12px;
    text-align: center;
    will-change: transform;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    [x-arrow] {
      position: absolute;
      width: 0;
      height: 0;
    }
    [x-circle] {
      position: absolute;
      will-change: transform;
      background-color: #333;
      width: 130%;
      width: calc(110% + 2rem);
      left: 50%;
      top: 50%;
      z-index: -1;
      overflow: hidden;
      transition: all ease;
    }
    [x-circle]:before {
      content: "";
      padding-top: 90%;
      float: left;
    }
  }
  .@{prefix}-tippy-tooltip--small {
    padding: .25rem .5rem;
    font-size: .8rem;
  }
  .@{prefix}-tippy-tooltip--big {
    padding: .6rem 1.2rem;
    font-size: 1.2rem;
  }
  .@{prefix}-tippy-tooltip[data-animatefill] {
    overflow: hidden;
    background-color: transparent;
  }
  .@{prefix}-tippy-tooltip[data-interactive] {
    pointer-events: auto;
  }
  .@{prefix}-tippy-tooltip[data-inertia] {
    transition-timing-function: cubic-bezier(.53,2,.36,.85);
  }

  @media screen and (max-width: 450px) {
    .@{prefix}-tippy-popper{max-width: 96%;
        max-width: calc(100% - 20px);
    }
}