UNPKG

tdesign-mobile-vue

Version:
1,109 lines (1,108 loc) 28.1 kB
.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-action-sheet__content { color: var(--td-action-sheet-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 12px)); border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 12px)); background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); overflow: hidden; } .t-action-sheet__content--grid { padding-top: 8px; } .t-action-sheet__content:focus { outline: 0; } .t-action-sheet__grid { padding-bottom: 8px; } .t-action-sheet__grid--swiper { padding-bottom: 0; } .t-action-sheet__description { color: var(--td-action-sheet-description-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)))); line-height: 22px; font-size: 14px; text-align: var(--td-action-sheet-text-align, center); padding: 12px 16px; position: relative; } .t-action-sheet__description::after { content: ""; display: block; position: absolute; top: unset; bottom: 0; left: unset; right: unset; background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7))); } .t-action-sheet__description::after { height: 1px; left: 0; right: 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .t-action-sheet__description--left { text-align: left; } .t-action-sheet__description--left::after { left: 16px; } .t-action-sheet__description--grid { line-height: 34px; } .t-action-sheet__description--grid::after { display: none; } .t-action-sheet__list-item { border: none; height: var(--td-action-sheet-list-item-height, 56px); padding: 0 16px; position: relative; 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; } .t-action-sheet__list-item::after { content: ""; display: block; position: absolute; top: unset; bottom: 0; left: unset; right: unset; background-color: var(--td-action-sheet-border-color, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7))); } .t-action-sheet__list-item::after { height: 1px; left: 0; right: 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); } .t-action-sheet__list-item--left { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; text-align: left; } .t-action-sheet__list-item--left::after { left: 16px; } .t-action-sheet__list-item--disabled { --td-button-default-disabled-bg: none; --td-button-default-disabled-color: var(--td-action-sheet-list-item-disabled-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); } .t-action-sheet__list-item-text { font-size: var(--td-font-size-m, 16px); font-weight: var(--td-action-sheet-text-weight, 400); word-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .t-action-sheet__list-item-icon { margin-right: 8px; } .t-action-sheet__swiper-wrap { margin-top: 8px; padding-bottom: 24px; position: relative; } .t-action-sheet__swiper-wrap .t-swiper__pagination .t-swiper-dot { background-color: var(--td-action-sheet-dot-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); } .t-action-sheet__swiper-wrap .t-swiper__pagination .t-swiper-dot--active { background-color: var(--td-action-sheet-dot-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9))); } .t-action-sheet__footer { background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } .t-action-sheet__gap-list { height: 8px; background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)))); } .t-action-sheet__gap-grid { height: 0.5px; background-color: var(--td-action-sheet-gap-color, var(--td-bg-color-page, var(--td-component-stroke, var(--td-gray-color-3, #e7e7e7)))); } .t-action-sheet__cancel { height: var(--td-action-sheet-cancel-height, 48px); border: none; border-radius: 0; font-weight: var(--td-action-sheet-text-weight, 400); 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; } .t-action-sheet__cancel::after { border-radius: 0; } .t-action-sheet__dots { --td-swiper-nav-dot-color: var(--td-action-sheet-dot-color, var(--td-text-color-disabled, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)))); --td-swiper-nav-dot-size: var(--td-action-sheet-dot-size, 8px); --td-swiper-nav-dot-active-color: var(--td-action-sheet-dot-active-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9))); } .t-dialog { overflow: hidden; width: var(--td-dialog-width, 311px); border-radius: var(--td-dialog-border-radius, var(--td-radius-extra-large, 12px)); background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff)); } .t-dialog__wrapper { --td-popup-border-radius: var(--td-dialog-border-radius, var(--td-radius-extra-large, 12px)); } .t-dialog__close-btn { position: absolute; top: var(--td-spacer, 8px); right: var(--td-spacer, 8px); font-size: var(--td-dialog-close-font-size, 22px); color: var(--td-dialog-close-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)))); } .t-dialog__content { padding: var(--td-spacer-3, 24px) var(--td-spacer-3, 24px) 0; max-height: var(--td-dialog-body-max-height, 456px); -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: var(--td-font-size-m, 16px); } .t-dialog__content:empty { display: none; } .t-dialog__header { text-align: center; font-weight: bold; font-size: var(--td-dialog-title-font-size, 18px); line-height: var(--td-dialog-title-line-height, 26px); color: var(--td-dialog-title-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); } .t-dialog__header + .t-dialog__body { margin-top: var(--td-spacer, 8px); } .t-dialog__body { overflow-y: scroll; text-align: center; -webkit-overflow-scrolling: touch; font-size: var(--td-dialog-content-font-size, 16px); color: var(--td-dialog-content-color, var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)))); line-height: var(--td-dialog-content-line-height, 24px); } .t-dialog__body-text { word-wrap: break-word; } .t-dialog__body--left { text-align: left; } .t-dialog__body--right { text-align: right; } .t-dialog__footer { display: -webkit-box; display: -ms-flexbox; display: flex; padding: var(--td-spacer-3, 24px); } .t-dialog__footer--column { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-flow: column-reverse; flex-flow: column-reverse; } .t-dialog__footer--column .t-dialog__button { width: 100%; -webkit-box-flex: unset; -ms-flex: unset; flex: unset; } .t-dialog__footer--full { padding: var(--td-spacer-4, 32px) 0 0; } .t-dialog__button { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .t-dialog__button--horizontal + .t-dialog__button--horizontal { margin-left: var(--td-spacer-1, 12px); } .t-dialog__button--vertical + .t-dialog__button--vertical { margin-bottom: var(--td-spacer-1, 12px); } .t-dialog__button--text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; --td-button-border-radius: 0; --td-button-medium-height: 56px; border-radius: 0; } .t-dialog__button--text::before { content: " "; position: absolute; -webkit-box-sizing: border-box; box-sizing: border-box; top: 0; left: 0; border-top: 1px solid var(--td-border-color, var(--td-gray-color-3, #e7e7e7)); border-left: 1px solid var(--td-border-color, var(--td-gray-color-3, #e7e7e7)); -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 200%; height: 200%; border-radius: 0; } .t-loading { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; } .t-loading__spinner { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; max-width: 100%; max-height: 100%; -webkit-animation: rotate 0.8s linear infinite; animation: rotate 0.8s linear infinite; color: var(--td-loading-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9))); } .t-loading__spinner.reverse { -webkit-animation-name: rotateReverse; animation-name: rotateReverse; } .t-loading__spinner--spinner { -webkit-animation-timing-function: steps(12); animation-timing-function: steps(12); color: var(--td-loading-spinner-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff))); } .t-loading__spinner--spinner .t-loading__dot { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .t-loading__spinner--spinner .t-loading__dot::before { display: block; width: 2.5px; height: 25%; margin: 0 auto; background-color: currentColor; border-radius: 40%; content: " "; } .t-loading__spinner--circular .t-loading__circular { border-radius: 100%; width: 100%; height: 100%; background: conic-gradient(from 180deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 60deg, currentColor 330deg, rgba(255, 255, 255, 0) 360deg); mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); /* stylelint-disable-next-line */ -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%); } .t-loading__spinner--dots { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-animation: none; animation: none; } .t-loading__spinner--dots .t-loading__dot { width: 20%; height: 20%; border-radius: 50%; background-color: currentColor; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-name: dotting; animation-name: dotting; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .t-loading__text { font-size: var(--td-loading-text-font-size, 12px); line-height: var(--td-loading-text-line-height, 20px); } .t-loading__text--vertical:not(:first-child):not(:empty) { margin-top: 6px; } .t-loading__text--horizontal:not(:first-child):not(:empty) { margin-left: 8px; } .t-loading--vertical { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .t-loading--horizontal { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; vertical-align: top; } @-webkit-keyframes t-bar { 0% { width: 0; } 50% { width: 70%; } 100% { width: 80%; } } @keyframes t-bar { 0% { width: 0; } 50% { width: 70%; } 100% { width: 80%; } } @-webkit-keyframes t-bar-loaded { 0% { height: 3px; opacity: 1; width: 90%; } 50% { height: 3px; opacity: 1; width: 100%; } 100% { height: 0; opacity: 0; width: 100%; } } @keyframes t-bar-loaded { 0% { height: 3px; opacity: 1; width: 90%; } 50% { height: 3px; opacity: 1; width: 100%; } 100% { height: 0; opacity: 0; width: 100%; } } .t-loading__dot:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); opacity: 0; } .t-loading__dot:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); opacity: 0.08333333; } .t-loading__dot:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0.16666667; } .t-loading__dot:nth-of-type(4) { -webkit-transform: rotate(120deg); transform: rotate(120deg); opacity: 0.25; } .t-loading__dot:nth-of-type(5) { -webkit-transform: rotate(150deg); transform: rotate(150deg); opacity: 0.33333333; } .t-loading__dot:nth-of-type(6) { -webkit-transform: rotate(180deg); transform: rotate(180deg); opacity: 0.41666667; } .t-loading__dot:nth-of-type(7) { -webkit-transform: rotate(210deg); transform: rotate(210deg); opacity: 0.5; } .t-loading__dot:nth-of-type(8) { -webkit-transform: rotate(240deg); transform: rotate(240deg); opacity: 0.58333333; } .t-loading__dot:nth-of-type(9) { -webkit-transform: rotate(270deg); transform: rotate(270deg); opacity: 0.66666667; } .t-loading__dot:nth-of-type(10) { -webkit-transform: rotate(300deg); transform: rotate(300deg); opacity: 0.75; } .t-loading__dot:nth-of-type(11) { -webkit-transform: rotate(330deg); transform: rotate(330deg); opacity: 0.83333333; } .t-loading__dot:nth-of-type(12) { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.91666667; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotateReverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rotateReverse { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes dotting { 0% { opacity: 0.15; } 1% { opacity: 0.8; } 33% { opacity: 0.8; } 34% { opacity: 0.15; } 100% { opacity: 0.15; } } @keyframes dotting { 0% { opacity: 0.15; } 1% { opacity: 0.8; } 33% { opacity: 0.8; } 34% { opacity: 0.15; } 100% { opacity: 0.15; } } .t-message { position: fixed; top: 0; left: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; min-height: 48px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 15000; padding: 12px 16px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: var(--td-message-border-radius, var(--td-radius-default, 6px)); line-height: 1em; background-color: var(--td-message-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))); -webkit-box-shadow: var(--td-message-box-shadow, var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06))); box-shadow: var(--td-message-box-shadow, var(--td-shadow-4, 0 2px 8px 0 rgba(0, 0, 0, 0.06))); } .t-message__text { color: var(--td-message-content-font-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)))); font-size: var(--td-font-size-base, 14px); line-height: 22px; } .t-message__text-wrap { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-x: hidden; text-overflow: ellipsis; } .t-message__text-nowrap { word-break: keep-all; white-space: nowrap; } .t-message__icon--left, .t-message__close-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .t-message--info { color: var(--td-message-info-color, var(--td-brand-color, var(--td-brand-color-7, #0052d9))); } .t-message--success { color: var(--td-message-success-color, var(--td-success-color, var(--td-success-color-5, #2ba471))); } .t-message--warning { color: var(--td-message-warning-color, var(--td-warning-color, var(--td-warning-color-5, #e37318))); } .t-message--error { color: var(--td-message-error-color, var(--td-error-color, var(--td-error-color-6, #d54941))); } .t-message__icon--left, .t-message__icon--right { font-size: 22px; } .t-message__icon--left:not(:empty) { margin-right: var(--td-spacer, 8px); } .t-message__icon--right { color: var(--td-message-close-icon-color, var(--td-text-color-placeholder, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)))); } .t-message__icon--right:not(:empty), .t-message__link { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: var(--td-spacer, 8px); } .message-enter-active { -webkit-animation: messageEnter 0.5s; animation: messageEnter 0.5s; } .message-leave-active { -webkit-animation: messageOut 0.2s; animation: messageOut 0.2s; } @-webkit-keyframes messageEnter { from { -webkit-transform: translate3d(0, -48px, 0); transform: translate3d(0, -48px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes messageEnter { from { -webkit-transform: translate3d(0, -48px, 0); transform: translate3d(0, -48px, 0); } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes messageOut { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, -48px, 0); transform: translate3d(0, -48px, 0); } } @keyframes messageOut { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { -webkit-transform: translate3d(0, -48px, 0); transform: translate3d(0, -48px, 0); } } .t-toast { position: fixed; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 12001; opacity: 1; -webkit-transition: opacity 300ms ease; transition: opacity 300ms ease; background-color: var(--td-toast-bg-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))); border-radius: var(--td-toast-radius, 4px); font-size: 14px; color: var(--td-toast-color, var(--td-font-white-1, #ffffff)); max-width: var(--td-toast-max-width, 185px); width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -webkit-box-sizing: border-box; box-sizing: border-box; } .t-toast--column { padding: 24px; min-width: 80px; min-height: 80px; border-radius: 8px; 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; } .t-toast--loading.t-toast--with-text { min-width: 102px; min-height: 102px; padding-top: 0; padding-bottom: 0; } .t-toast__content { -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 22px; } .t-toast__content--row { display: -webkit-box; display: -ms-flexbox; display: flex; text-align: left; padding: 14px 22px; } .t-toast__content--column { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } .t-toast__icon--row { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: var(--td-toast-row-icon-size, 24px); } .t-toast__icon--column { font-size: var(--td-toast-column-icon-size, 32px); } .t-toast__text { overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; /* stylelint-disable-next-line */ display: -webkit-box; -webkit-box-orient: vertical; white-space: pre-line; } .t-toast__text--column:not(:empty):not(:only-child) { margin-top: 8px; min-width: 64px; } .t-toast__text--row:not(:empty):not(:only-child) { margin-left: 8px; } .t-toast.t-fade-enter, .t-toast.t-fade-leave-to { opacity: 0; } .t-toast--lock { overflow: hidden; cursor: not-allowed; } .t-toast--lock * { pointer-events: none; }