tdesign-mobile-vue
Version:
tdesign-mobile-vue
423 lines (422 loc) • 9.95 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-guide--absolute {
position: absolute;
}
.t-guide--fixed {
position: fixed;
}
.t-guide__overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999997;
}
.t-guide__highlight {
z-index: 999998;
-webkit-transition: var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
transition: var(--td-anim-duration-base, 0.2s) var(--td-anim-time-fn-ease-out, cubic-bezier(0, 0, 0.15, 1));
border-radius: var(--td-radius-default, 6px);
}
.t-guide__highlight--mask {
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 0 0 0 5000px;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6) 0 0 0 5000px;
}
.t-guide__highlight--dialog {
-webkit-box-shadow: none;
box-shadow: none;
}
.t-guide__highlight--nomask {
border-radius: var(--td-radius-default, 6px);
border: 2px solid var(--td-brand-color, var(--td-brand-color-7, #0052d9));
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.t-guide__reference {
z-index: 999999;
}
.t-guide__wrapper .t-popover__content {
border: 1px solid var(--td-gray-color-4, #dcdcdc);
border-radius: var(--td-radius-large, 9px);
}
.t-guide__wrapper .t-popover[data-popper-placement^="bottom"] .t-popover__content {
margin-top: 16px;
}
.t-guide__wrapper--content .t-popover__content {
background: none;
-webkit-box-shadow: none;
box-shadow: none;
padding: 0;
border: none;
}
.t-guide__dialog {
border-radius: var(--td-radius-extra-large, 12px);
}
.t-guide__content--popover {
padding: 4px;
}
.t-guide__content--dialog {
padding: 24px 0;
width: var(--td-guide-dialog-width, 311px);
}
.t-guide__content--dialog .t-guide__title {
text-align: center;
font-size: 18px;
line-height: 26px;
}
.t-guide__content--dialog .t-guide__desc {
margin-top: 8px;
text-align: center;
font-size: var(--td-font-size-m, 16px);
line-height: 24px;
}
.t-guide__content--popover .t-guide__tooltip {
min-width: var(--td-guide-tooltip-min-width, 240px);
max-width: var(--td-guide-tooltip-max-width, 270px);
}
.t-guide__title {
text-align: left;
color: var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
font-size: var(--td-font-size-m, 16px);
font-weight: 600;
line-height: 24px;
}
.t-guide__desc {
margin-top: 4px;
text-align: left;
color: var(--td-text-color-secondary, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
font-size: var(--td-font-size-base, 14px);
font-weight: 400;
line-height: 22px;
}
.t-guide__footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 24px;
}
.t-guide__footer button {
margin-right: 12px;
}
.t-guide__footer button:last-child {
margin-right: 0;
}
.t-guide__footer--popover {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.t-guide__footer--dialog {
margin-top: var(--td-spacer-3, 24px);
padding: 0 24px;
}
.t-guide__footer--dialog button:last-child {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
.t-guide__footer--dialog .t-guide__action {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}