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

tdesign-mobile-vue

.t-float-left {
  float: left;
}
.t-float-right {
  float: right;
}
@-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;
}
.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);
}
.t-badge {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
.t-badge--basic {
  z-index: 100;
  padding: 0 var(--td-badge-basic-padding, 4px);
  font: var(--td-badge-font, var(--td-font-mark-extraSmall));
  color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
  background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
  text-align: center;
  height: var(--td-badge-basic-height, 16px);
  border-radius: var(--td-badge-border-radius, 2px);
}
.t-badge--dot {
  height: var(--td-badge-dot-size, 8px);
  border-radius: 50%;
  min-width: var(--td-badge-dot-size, 8px);
  padding: 0;
}
.t-badge--count {
  min-width: var(--td-badge-basic-width, 16px);
  white-space: nowrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.t-badge--circle {
  border-radius: calc(var(--td-badge-basic-height, 16px) / 2);
}
.t-badge__ribbon-outer,
.t-badge__ribbon-right-outer,
.t-badge__triangle-right-outer,
.t-badge__ribbon-left-outer,
.t-badge__triangle-left-outer {
  position: absolute;
  top: 0;
}
.t-badge__ribbon-outer,
.t-badge__ribbon-right-outer,
.t-badge__triangle-right-outer {
  right: 0;
}
.t-badge__ribbon-left-outer,
.t-badge__triangle-left-outer {
  left: 0;
}
.t-badge--bubble {
  border-radius: var(--td-badge-bubble-border-radius, 10px 10px 10px 1px);
}
.t-badge--ribbon,
.t-badge--ribbon-right,
.t-badge--ribbon-left,
.t-badge--triangle-left,
.t-badge--triangle-right {
  width: calc(var(--td-badge-basic-height, 16px) * 2);
  height: calc(var(--td-badge-basic-height, 16px) * 2);
  border-radius: 0;
  padding: 0;
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}
.t-badge--ribbon,
.t-badge--ribbon-right {
  background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
}
.t-badge--triangle-right {
  background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
}
.t-badge--ribbon,
.t-badge--ribbon-right,
.t-badge--triangle-right {
  right: 0;
}
.t-badge--ribbon .t-badge__count,
.t-badge--ribbon-right .t-badge__count,
.t-badge--triangle-right .t-badge__count {
  -webkit-transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + 0.5px));
          transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + 0.5px));
}
.t-badge--ribbon-left {
  background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
}
.t-badge--triangle-left {
  background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
}
.t-badge--ribbon-left,
.t-badge--triangle-left {
  left: 0;
}
.t-badge--ribbon-left .t-badge__count,
.t-badge--triangle-left .t-badge__count {
  -webkit-transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + 0.5px));
          transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + 0.5px));
}
.t-badge--large {
  font: var(--td-badge-large-font, var(--td-font-mark-small));
  height: var(--td-badge-large-height, 20px);
  min-width: var(--td-badge-large-height, 20px);
  padding: 0 var(--td-badge-large-padding, 5px);
}
.t-badge--large.t-badge--circle {
  border-radius: calc(var(--td-badge-large-height, 20px) / 2);
}
.t-badge--large.t-badge--ribbon,
.t-badge--large.t-badge--ribbon-right,
.t-badge--large.t-badge--ribbon-left,
.t-badge--large.t-badge--triangle-right,
.t-badge--large.t-badge--triangle-left {
  width: calc(var(--td-badge-large-height, 20px) * 2);
  height: calc(var(--td-badge-large-height, 20px) * 2);
  padding: 0;
}
.t-badge--large.t-badge--ribbon .t-badge__count,
.t-badge--large.t-badge--ribbon-right .t-badge__count,
.t-badge--large.t-badge--triangle-right .t-badge__count {
  -webkit-transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
          transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
}
.t-badge--large.t-badge--ribbon-left .t-badge__count,
.t-badge--large.t-badge--triangle-left .t-badge__count {
  -webkit-transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
          transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
}
.t-badge__content:not(:empty) + .t-badge--bubble.t-has-count,
.t-badge__content:not(:empty) + .t-badge--circle.t-has-count,
.t-badge__content:not(:empty) + .t-badge--square.t-has-count {
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  top: 0;
  left: 100%;
}
.t-badge__content-text {
  display: block;
  font: var(--td-font-body-large);
  color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-badge__count:empty {
  display: none;
}