tdesign-mobile-vue/es/popover/style/index.css

tdesign-mobile-vue

.t-float-left {
  float: left;
}
.t-float-right {
  float: right;
}
.hotspot-expanded.relative {
  position: relative;
}
.hotspot-expanded::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}
.content-placement-top .t-popover[data-popper-placement^="top"] .t-popover__content {
  margin-bottom: 8px;
}
.content-placement-bottom .t-popover[data-popper-placement^="bottom"] .t-popover__content {
  margin-top: 8px;
}
.content-placement-left .t-popover[data-popper-placement^="left"] .t-popover__content {
  margin-right: 8px;
}
.content-placement-right .t-popover[data-popper-placement^="right"] .t-popover__content {
  margin-left: 8px;
}
@-webkit-keyframes t-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes t-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes t-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes t-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes t-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes t-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes t-slide-top-in {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-top-in {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-top-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes t-slide-top-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes t-slide-bottom-in {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-bottom-in {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-bottom-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes t-slide-bottom-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes t-slide-right-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-right-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@keyframes t-slide-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@-webkit-keyframes t-slide-left-in {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes t-slide-left-in {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes t-slide-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes t-slide-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes t-fade-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@keyframes t-fade-zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
}
@-webkit-keyframes t-fade-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
}
@keyframes t-fade-zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) scale(0.6);
            transform: translate(-50%, -50%) scale(0.6);
  }
}
@keyframes t-spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.t-icon-loading {
  -webkit-animation: t-spin 1s linear infinite;
          animation: t-spin 1s linear infinite;
}
.t-popover {
  display: inline-block;
  z-index: 1500;
  position: absolute;
  overflow: visible;
}
.t-popover__wrapper {
  display: inline-block;
}
.t-popover__content {
  position: relative;
  -webkit-box-shadow: var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08));
          box-shadow: var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08));
  border-radius: 6px;
  padding: var(--td-popover-padding, 12px);
  font-size: var(--td-font-size-m, 16px);
  line-height: 24px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  word-break: break-all;
}
.t-popover__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 8px;
}
.t-popover--dark {
  color: #fff;
  background: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
}
.t-popover--dark .t-popover__arrow {
  color: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
}
.t-popover--light {
  color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
  background: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-popover--light .t-popover__arrow {
  color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
}
.t-popover--brand {
  color: var(--td-brand-color-7, #0052d9);
  background: var(--td-brand-color-1, #f2f3ff);
}
.t-popover--brand .t-popover__arrow {
  color: var(--td-brand-color-1, #f2f3ff);
}
.t-popover--success {
  color: var(--td-success-color-5, #2ba471);
  background: var(--td-success-color-1, #e3f9e9);
}
.t-popover--success .t-popover__arrow {
  color: var(--td-success-color-1, #e3f9e9);
}
.t-popover--warning {
  color: var(--td-warning-color-5, #e37318);
  background: var(--td-warning-color-1, #fff1e9);
}
.t-popover--warning .t-popover__arrow {
  color: var(--td-warning-color-1, #fff1e9);
}
.t-popover--error {
  color: var(--td-error-color-6, #d54941);
  background: var(--td-error-color-1, #fff0ed);
}
.t-popover--error .t-popover__arrow {
  color: var(--td-error-color-1, #fff0ed);
}
.t-popover[data-popper-placement^="top"] .t-popover__content {
  margin-bottom: 8px;
}
.t-popover[data-popper-placement^="bottom"] .t-popover__content {
  margin-top: 8px;
}
.t-popover[data-popper-placement^="left"] .t-popover__content {
  margin-right: 8px;
}
.t-popover[data-popper-placement^="right"] .t-popover__content {
  margin-left: 8px;
}
.t-popover[data-popper-placement^="top"] .t-popover__arrow {
  bottom: 0;
  border-top-color: currentColor;
  border-bottom-width: 0;
  margin-bottom: calc(8px * -1);
}
.t-popover[data-popper-placement="top"] {
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.t-popover[data-popper-placement="top"] .t-popover__arrow {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.t-popover[data-popper-placement="top-start"] {
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.t-popover[data-popper-placement="top-start"] .t-popover__arrow {
  left: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement="top-end"] {
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.t-popover[data-popper-placement="top-end"] .t-popover__arrow {
  right: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement^="bottom"] .t-popover__arrow {
  top: 0;
  border-top-width: 0;
  border-bottom-color: currentColor;
  margin-top: calc(8px * -1);
}
.t-popover[data-popper-placement="bottom"] {
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
.t-popover[data-popper-placement="bottom"] .t-popover__arrow {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.t-popover[data-popper-placement="bottom-start"] {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.t-popover[data-popper-placement="bottom-start"] .t-popover__arrow {
  left: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement="bottom-end"] {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.t-popover[data-popper-placement="bottom-end"] .t-popover__arrow {
  right: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement^="left"] .t-popover__arrow {
  right: 0;
  border-right-width: 0;
  border-left-color: currentColor;
  margin-right: calc(8px * -1);
}
.t-popover[data-popper-placement="left"] {
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
.t-popover[data-popper-placement="left"] .t-popover__arrow {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.t-popover[data-popper-placement="left-start"] {
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
.t-popover[data-popper-placement="left-start"] .t-popover__arrow {
  top: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement="left-end"] {
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.t-popover[data-popper-placement="left-end"] .t-popover__arrow {
  bottom: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement^="right"] .t-popover__arrow {
  left: 0;
  border-right-color: currentColor;
  border-left-width: 0;
  margin-left: calc(8px * -1);
}
.t-popover[data-popper-placement="right"] {
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
.t-popover[data-popper-placement="right"] .t-popover__arrow {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.t-popover[data-popper-placement="right-start"] {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
}
.t-popover[data-popper-placement="right-start"] .t-popover__arrow {
  top: var(--td-popover-padding, 12px);
}
.t-popover[data-popper-placement="right-end"] {
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
.t-popover[data-popper-placement="right-end"] .t-popover__arrow {
  bottom: var(--td-popover-padding, 12px);
}
.t-popover--animation-enter,
.t-popover--animation-enter-from,
.t-popover--animation-exiting,
.t-popover--animation-leave-to {
  opacity: 0;
  visibility: hidden;
}
.t-popover--animation-enter-to,
.t-popover--animation-entering,
.t-popover--animation-leave-from,
.t-popover--animation-leave {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none;
          transform: none;
}
.t-popover--animation-enter-active {
  -webkit-transition: opacity var(--td-anim-duration-base, 0.2s) linear;
  transition: opacity var(--td-anim-duration-base, 0.2s) linear;
}
.t-popover--animation-leave-active {
  -webkit-transition: opacity var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1)), visibility var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-in, cubic-bezier(0.82, 0, 1, 0.9));
  transition: opacity var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1)), visibility var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-in, cubic-bezier(0.82, 0, 1, 0.9));
}