tdesign-mobile-vue
Version:
tdesign-mobile-vue
1,109 lines (1,108 loc) • 28.1 kB
CSS
.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;
}