ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / centosnipponia / public_html / nipponiacom / wp-content / themes / sydney-pro-ii / css / modules / src

.syd-has-tooltip-content {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    background-color: #333;
    border-radius: 10px;
    padding: 10px; 
    color: #fff;
    z-index: 99;   
    display: none;
    opacity: 1;
    line-height: 1.3;
    --tooltip-arrow-color: #333;

&.show {
        display: inline-block;
        opacity: 1;
    }

&::after {
        position: absolute;
        border-style: solid;
        content: "";      
        width: 0;
        height: 0;  
    }

p:last-of-type {
        margin: 0;
    }
}

.syd-has-tooltip-enable {

&.sydney-tooltip-top {
        .syd-has-tooltip-content {
            bottom: calc(100% + 10px);

&::after {
                left: 50%;
                border-width: 10px 10px 0 10px;
                border-color: var(--tooltip-arrow-color) transparent transparent transparent;
                transform: translateX(-50%);
                top: 100%;
            }

}
    }
    &.sydney-tooltip-bottom {
        .syd-has-tooltip-content {
            top: calc(100% + 10px);

&::after {
                left: 50%;
                border-width: 0 10px 10px 10px;
                border-color: transparent transparent var(--tooltip-arrow-color) transparent;
                transform: translateX(-50%);
                bottom: 100%;
            }
        }
    }

&.sydney-tooltip-left {
        .syd-has-tooltip-content {
            left: auto;
            top: 50%;
            transform: translateY(-50%);
            right: calc(100% + 10px);

&::after {
                left: 100%;
                border-width: 10px 0 10px 10px;
                border-color: transparent transparent transparent var(--tooltip-arrow-color);
                transform: translateY(-50%);
                top: 50%;
            }
        }
    }

&.sydney-tooltip-right {
        .syd-has-tooltip-content {
            top: 50%;
            transform: translateY(-50%);
            left: calc(100% + 10px);

&::after {
                right: 100%;
                border-width: 10px 10px 10px 0;
                border-color: transparent var(--tooltip-arrow-color) transparent transparent;
                transform: translateY(-50%);
                top: 50%;
            }            
        }
    }
}
.syd-has-tooltip-content.no-arrow::after {
    display: none;
}

@keyframes sydttlfadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .sydttl-fadeIn {
    animation-name: sydttlfadeIn;
  }

@keyframes sydttlzoomIn {
    from {
      opacity: 0;
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    50% {
      opacity: 1;
    }
  }
  
  .sydttl-zoomIn {
    animation-name: sydttlzoomIn;
  }

@keyframes sydttlrotateIn {
    from {
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;
    }
  
    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  .sydttl-rotateIn {
    animation-name: sydttlrotateIn;
    transform-origin: center;
  }
  @keyframes sydttlslideInDown {
    from {
      transform: translate3d(0, -50%, 0);
      visibility: visible;
      opacity: 0;
    }
  
    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  .sydttl-slideInDown {
    animation-name: sydttlslideInDown;
  }
  @keyframes sydttlslideInLeft {
    from {
      transform: translate3d(-35%, -50%, 0);
      visibility: visible;
      opacity: 0;
    }
  
    to {
      transform: translate3d(0, -50%, 0);
      opacity: 1;
    }
  }
  
  .sydttl-slideInLeft {
    animation-name: sydttlslideInLeft;
  }
  @keyframes sydttlslideInRight {
    from {
      transform: translate3d(35%, -50%, 0);
      visibility: visible;
      opacity: 0;
    }
  
    to {
      transform: translate3d(0, -50%, 0);
      opacity: 1;
    }
  }
  
  .sydttl-slideInRight {
    animation-name: sydttlslideInRight;
  }
  @keyframes sydttlslideInUp {
    from {
      transform: translate3d(0, 50%, 0);
      visibility: visible;
      opacity: 0;
    }
  
    to {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  .sydttl-slideInUp {
    animation-name: sydttlslideInUp;
  }

[+] ..
[-] ext-blog.scss [edit]
[-] ext-footer.scss [edit]
[-] live-chat.scss [edit]
[-] modal.scss [edit]
[-] multistep-checkout.scss [edit]
[-] page-headers.scss [edit]
[-] quick-links.scss [edit]
[-] sydney-reviews-advanced.scss [edit]
[-] tooltips.scss [edit]
[-] woosidebar.scss [edit]
[-] .htaccess.disabled [edit]