tdesign-vue-next 1.9.7-alpha.2 → 1.9.7

package/dist/plugin.css

@@ -0,0 +1,809 @@
+@keyframes tDialogZoomIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.01);
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes tDialogZoomOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.01);
+  }
+}
+@keyframes tDialogMaskIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes tDialogMaskOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.t-dialog-zoom .animation-enter {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
+  animation-play-state: paused;
+}
+.t-dialog-zoom .animation-exit {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
+  animation-play-state: paused;
+}
+.t-dialog-zoom .animation-active {
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-zoom-enter,
+.t-dialog-zoom-enter-from,
+.t-dialog-zoom-appear {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
+  animation-play-state: paused;
+}
+.t-dialog-zoom-exit {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
+  animation-play-state: paused;
+}
+.t-dialog-zoom-enter-active,
+.t-dialog-zoom-appear-active {
+  animation-name: tDialogZoomIn;
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-zoom-exit-active {
+  animation-name: tDialogZoomOut;
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-zoom__vue-enter-active .t-dialog {
+  animation-name: tDialogZoomIn;
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
+  animation-play-state: paused;
+}
+.t-dialog-zoom__vue-enter-active .t-dialog__mask {
+  animation-name: tDialogMaskIn;
+  animation-duration: 0.2s;
+  animation-timing-function: linear;
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-zoom__vue-leave-active .t-dialog {
+  animation-name: tDialogZoomOut;
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
+  animation-play-state: paused;
+}
+.t-dialog-zoom__vue-leave-active .t-dialog__mask {
+  animation-name: tDialogMaskOut;
+  animation-duration: 0.2s;
+  animation-timing-function: linear;
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-zoom__vue-enter-to .t-dialog {
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-zoom__vue-leave-to .t-dialog {
+  animation-play-state: running;
+  animation-fill-mode: both;
+}
+.t-dialog-fade-enter,
+.t-dialog-fade-appear {
+  opacity: 0;
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
+  animation-play-state: paused;
+}
+.t-dialog-fade-exit {
+  animation-duration: 0.2s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0, 0, 0.15, 1);
+  animation-play-state: paused;
+}
+.t-dialog-fade-enter.t-dialog-fade-enter-active,
+.t-dialog-fade-appear.t-dialog-fade-appear-active {
+  animation-name: tDialogFadeIn;
+  animation-play-state: running;
+}
+.t-dialog-fade-exit.t-dialog-fade-exit-active {
+  animation-name: tDialogFadeOut;
+  animation-play-state: running;
+}
+@keyframes tDialogFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes tDialogFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.t-dialog {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: 480px;
+  background-color: var(--td-bg-color-container);
+  position: relative;
+  border: 1px solid var(--td-border-level-1-color);
+  border-radius: var(--td-radius-large);
+}
+.t-dialog .t-icon.t-is-info {
+  color: var(--td-brand-color);
+}
+.t-dialog .t-icon.t-is-success {
+  color: var(--td-success-color);
+}
+.t-dialog .t-icon.t-is-warning {
+  color: var(--td-warning-color);
+}
+.t-dialog .t-icon.t-is-error {
+  color: var(--td-error-color);
+}
+.t-dialog--lock {
+  overflow: hidden;
+}
+.t-dialog__header {
+  color: var(--td-text-color-primary);
+  font: var(--td-font-title-medium);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  word-break: break-word;
+  gap: var(--td-comp-margin-s);
+  box-sizing: border-box;
+}
+.t-dialog__header .t-dialog__header-content {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+.t-dialog__header .t-icon:not(.t-icon-close) {
+  font-size: calc(var(--td-font-size-body-large) + 8px);
+  display: inline-flex;
+  align-items: center;
+  margin-right: var(--td-comp-margin-s);
+  flex-shrink: 0;
+}
+.t-dialog__header--fullscreen {
+  background-color: var(--td-bg-color-secondarycontainer);
+  min-height: var(--td-comp-size-xxxl);
+  justify-content: flex-end;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  padding: 0 var(--td-comp-paddingLR-xxl);
+}
+.t-dialog__header--fullscreen .t-dialog__header-content {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.t-dialog__body {
+  color: var(--td-text-color-secondary);
+  font: var(--td-font-body-medium);
+  overflow: auto;
+  padding: var(--td-comp-paddingTB-l) 0;
+  word-break: break-word;
+}
+@-moz-document url-prefix() {
+  .t-dialog__body {
+    scrollbar-color: var(--td-scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+.t-dialog__body::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.t-dialog__body::-webkit-scrollbar-thumb {
+  border: 0px solid transparent;
+  background-clip: content-box;
+  background-color: var(--td-scrollbar-color);
+  border-radius: 11px;
+}
+.t-dialog__body::-webkit-scrollbar-thumb:vertical:hover,
+.t-dialog__body::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--td-scrollbar-hover-color);
+}
+.t-dialog__body__icon,
+.t-dialog__body--icon {
+  padding: var(--td-comp-paddingTB-l) 0;
+}
+.t-dialog__body--fullscreen {
+  box-sizing: border-box;
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
+  height: calc(100% - var(--td-comp-size-xxxl) - var(--td-comp-size-xxxxl));
+  overflow: auto;
+}
+@-moz-document url-prefix() {
+  .t-dialog__body--fullscreen {
+    scrollbar-color: var(--td-scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+.t-dialog__body--fullscreen::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+.t-dialog__body--fullscreen::-webkit-scrollbar-thumb {
+  border: 0px solid transparent;
+  background-clip: content-box;
+  background-color: var(--td-scrollbar-color);
+  border-radius: 11px;
+}
+.t-dialog__body--fullscreen::-webkit-scrollbar-thumb:vertical:hover,
+.t-dialog__body--fullscreen::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--td-scrollbar-hover-color);
+}
+.t-dialog__body--fullscreen--without-footer {
+  box-sizing: border-box;
+  padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
+  height: calc(100% - var(--td-comp-size-xxxl));
+  overflow: auto;
+}
+.t-dialog__footer {
+  width: 100%;
+  text-align: right;
+  padding: var(--td-comp-paddingTB-l) 0 0;
+}
+.t-dialog__footer .t-button + .t-button {
+  margin-left: var(--td-comp-margin-s);
+}
+.t-dialog__footer--fullscreen {
+  min-height: var(--td-comp-size-xxxxl);
+  padding: 0 var(--td-comp-paddingLR-xxl) var(--td-comp-paddingTB-xxl);
+  box-sizing: border-box;
+}
+.t-dialog--default {
+  padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
+}
+.t-dialog__close {
+  font-size: calc(var(--td-font-size-body-large) + 4px);
+  color: var(--td-text-color-secondary);
+  display: flex;
+  width: calc(var(--td-font-size-body-large) + 4px);
+  height: calc(var(--td-font-size-body-large) + 4px);
+  align-items: center;
+  border-radius: var(--td-radius-default);
+  transition: all 0.2s linear;
+  padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
+}
+.t-dialog__close:hover {
+  cursor: pointer;
+  background: var(--td-bg-color-container-hover);
+}
+.t-dialog__close:active {
+  background: var(--td-bg-color-container-active);
+}
+.t-dialog__close--fullscreen {
+  display: flex;
+  background: transparent;
+}
+.t-dialog__close--fullscreen:hover {
+  cursor: pointer;
+  background: var(--td-bg-color-secondarycontainer-hover);
+}
+.t-dialog__close--fullscreen:active {
+  background: var(--td-bg-color-secondarycontainer-active);
+}
+.t-dialog.t-dialog--draggable:hover {
+  cursor: move;
+}
+.t-dialog.t-dialog--draggable .t-dialog__header:hover,
+.t-dialog.t-dialog--draggable .t-dialog__body:hover,
+.t-dialog.t-dialog--draggable .t-dialog__footer:hover {
+  cursor: auto;
+}
+.t-dialog__fullscreen {
+  width: 100%;
+  border-radius: 0;
+}
+.t-dialog__ctx {
+  pointer-events: auto;
+  outline: none;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.t-dialog__ctx.t-dialog__ctx--modeless {
+  pointer-events: none;
+}
+.t-dialog__ctx.t-dialog__ctx--fixed {
+  position: fixed;
+  z-index: 2500;
+}
+.t-dialog__ctx.t-dialog__ctx--absolute {
+  position: absolute;
+}
+.t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__mask {
+  position: absolute;
+}
+.t-dialog__ctx.t-dialog__ctx--absolute .t-dialog__wrap {
+  position: absolute;
+}
+.t-dialog__ctx.t-is-visible {
+  visibility: visible;
+}
+.t-dialog__ctx.t-is-hidden {
+  visibility: hidden;
+}
+.t-dialog__ctx.t-is-display {
+  display: block;
+}
+.t-dialog__ctx.t-not-display {
+  display: none;
+}
+.t-dialog__ctx .t-dialog__mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: var(--td-mask-active);
+  pointer-events: auto;
+}
+.t-dialog__ctx .t-dialog__wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  overflow: auto;
+}
+@-moz-document url-prefix() {
+  .t-dialog__ctx .t-dialog__wrap {
+    scrollbar-color: var(--td-scrollbar-color) transparent;
+    scrollbar-width: thin;
+  }
+}
+.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb {
+  border: 2px solid transparent;
+  background-clip: content-box;
+  background-color: var(--td-scrollbar-color);
+  border-radius: 15px;
+}
+.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:vertical:hover,
+.t-dialog__ctx .t-dialog__wrap::-webkit-scrollbar-thumb:horizontal:hover {
+  background-color: var(--td-scrollbar-hover-color);
+}
+.t-dialog__ctx .t-dialog__position {
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  padding: 48px 0;
+  box-sizing: border-box;
+}
+.t-dialog__ctx .t-dialog__position.t-dialog--top {
+  align-items: flex-start;
+  padding-top: 20vh;
+}
+.t-dialog__ctx .t-dialog__position.t-dialog--center {
+  align-items: center;
+}
+.t-dialog__ctx .t-dialog__position_fullscreen {
+  display: flex;
+  justify-content: center;
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+.t-dialog__ctx .t-is-hidden {
+  background: none;
+}
+.t-dialog__ctx .t-dialog {
+  pointer-events: auto;
+  z-index: 2500;
+}
+@keyframes t-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes t-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes t-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.t-icon-loading {
+  animation: t-spin 1s linear infinite;
+}
+@keyframes t-zoom-out {
+  from {
+    transform: scale(0.2);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+.t-loading {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-primary);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  color: var(--td-brand-color);
+  font-size: var(--td-comp-size-l);
+}
+.t-loading--lock {
+  overflow: hidden;
+}
+.t-loading.t-size-s {
+  font-size: var(--td-comp-size-xxxs);
+}
+.t-loading.t-size-l {
+  font-size: var(--td-comp-size-xxxl);
+}
+.t-loading__parent--relative {
+  position: relative !important;
+}
+.t-loading__fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3500;
+}
+.t-loading--center {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+}
+.t-loading__content {
+  position: absolute;
+  left: 48%;
+  top: 20%;
+}
+.t-loading--inherit-color {
+  color: inherit;
+}
+.t-loading__parent {
+  position: relative;
+}
+.t-loading__overlay {
+  background-color: var(--td-mask-disabled);
+}
+/** 仅用于作为包裹元素时 */
+.t-loading--full {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 3500;
+}
+.t-loading--hidden {
+  visibility: hidden;
+}
+.t-loading--visible {
+  visibility: visible;
+}
+.t-loading__text {
+  width: auto;
+  display: inline-block;
+  vertical-align: middle;
+  font: var(--td-font-body-medium);
+  margin-left: var(--td-comp-margin-xs);
+}
+.t-loading__gradient {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+}
+.t-loading__gradient-conic {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--td-radius-circle);
+  /* stylelint-disable-next-line color-no-hex */
+  background: conic-gradient(from 90deg at 50% 50%, #fff 0deg, currentcolor 360deg);
+  /* stylelint-disable-next-line */
+  -webkit-mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
+  /* stylelint-disable-next-line color-no-hex */
+  mask: radial-gradient(transparent calc(50% - 0.5px), #fff 50%);
+}
+.t-message {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  width: fit-content;
+  outline: 0;
+  border-radius: var(--td-radius-medium);
+  background-color: var(--td-bg-color-container);
+  box-shadow: var(--td-shadow-3), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  color: var(--td-text-color-primary);
+  font: var(--td-font-body-medium);
+  padding: var(--td-comp-paddingTB-m) var(--td-comp-paddingLR-l);
+}
+.t-message > .t-icon,
+.t-message > [data-t-icon] > .t-icon,
+.t-message .t-loading {
+  color: var(--td-brand-color);
+  margin-right: var(--td-comp-margin-s);
+  flex-shrink: 0;
+  font-size: calc(var(--td-font-size-body-medium) + 6px);
+}
+.t-message.t-is-success > .t-icon,
+.t-message.t-is-success > [data-t-icon] > .t-icon,
+.t-message.t-is-success .t-loading {
+  color: var(--td-success-color);
+}
+.t-message.t-is-warning > .t-icon,
+.t-message.t-is-warning > [data-t-icon] > .t-icon,
+.t-message.t-is-warning .t-loading {
+  color: var(--td-warning-color);
+}
+.t-message.t-is-error > .t-icon,
+.t-message.t-is-error > [data-t-icon] > .t-icon,
+.t-message.t-is-error .t-loading {
+  color: var(--td-error-color);
+}
+.t-message.t-is-closable .t-message__close {
+  display: inline-flex;
+  margin-right: 0;
+  margin-left: var(--td-comp-margin-xxl);
+  cursor: pointer;
+  color: var(--td-text-color-secondary);
+}
+.t-message.t-is-closable .t-message__close .t-icon-close {
+  font-size: calc(var(--td-font-size-body-medium) + 2px);
+  border-radius: var(--td-radius-default);
+  transition: all 0.2s linear;
+}
+.t-message.t-is-closable .t-message__close .t-icon-close:hover {
+  background: var(--td-bg-color-container-hover);
+}
+.t-message.t-is-closable .t-message__close .t-icon-close:active {
+  background: var(--td-bg-color-container-active);
+}
+.t-message__list {
+  position: fixed;
+  z-index: 6000;
+}
+.t-message__list .t-message {
+  margin-bottom: var(--td-comp-margin-s);
+  word-break: break-all;
+}
+.t-notification {
+  color: var(--td-text-color-primary);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: var(--td-font-body-medium);
+  outline: 0;
+  border: 0;
+  background-color: var(--td-bg-color-container);
+  display: flex;
+  box-shadow: var(--td-shadow-2), var(--td-shadow-inset-top), var(--td-shadow-inset-right), var(--td-shadow-inset-bottom), var(--td-shadow-inset-left);
+  box-sizing: border-box;
+  border-radius: var(--td-radius-medium);
+  width: 360px;
+  padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
+}
+.t-notification__icon {
+  width: calc(var(--td-font-size-body-large) + 8px);
+  text-align: center;
+  margin-right: var(--td-comp-margin-s);
+}
+.t-notification__icon .t-icon {
+  font-size: calc(var(--td-font-size-body-large) + 8px);
+}
+.t-notification .t-icon.t-is-info {
+  color: var(--td-brand-color);
+}
+.t-notification .t-icon.t-is-success {
+  color: var(--td-success-color);
+}
+.t-notification .t-icon.t-is-warning {
+  color: var(--td-warning-color);
+}
+.t-notification .t-icon.t-is-error {
+  color: var(--td-error-color-6);
+}
+.t-notification__main {
+  flex: 1;
+}
+.t-notification__title__wrap {
+  display: flex;
+  justify-content: space-between;
+}
+.t-notification__title {
+  font: var(--td-font-title-medium);
+  color: var(--td-text-color-primary);
+}
+.t-notification .t-icon-close {
+  cursor: pointer;
+  font-size: var(--td-font-size-body-large);
+  border-radius: var(--td-radius-default);
+  color: var(--td-text-color-secondary);
+}
+.t-notification .t-icon-close:hover {
+  background: var(--td-bg-color-container-hover);
+}
+.t-notification .t-icon-close:active {
+  background: var(--td-bg-color-container-active);
+}
+.t-notification__content {
+  font: var(--td-font-body-medium);
+  color: var(--td-text-color-secondary);
+  margin-top: var(--td-comp-margin-s);
+  max-height: 66px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  /* stylelint-disable-next-line */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  /* stylelint-disable-next-line */
+  -webkit-box-orient: vertical;
+}
+.t-notification__detail {
+  margin-top: var(--td-comp-margin-l);
+  text-align: right;
+  font: var(--td-font-body-medium);
+}
+.t-notification__detail-item {
+  cursor: pointer;
+}
+.t-notification__detail-item:hover {
+  color: inherit;
+  background: var(--td-bg-color-container-hover);
+}
+.t-notification__detail-item:active {
+  color: inherit;
+  background: var(--td-bg-color-container-active);
+}
+.t-notification__detail-item + .t-notification__detail-item {
+  margin-left: var(--td-comp-margin-s);
+}
+.t-notification__detail-item.t-is-active {
+  color: var(--td-brand-color);
+}
+.t-notification__show--top-left {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+.t-notification__show--top-left > .t-notification {
+  animation-duration: 0.3s;
+  animation-name: slidein-top-left;
+}
+@keyframes slidein-top-left {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.t-notification__show--top-right {
+  position: fixed;
+  top: 0;
+  right: 0;
+}
+.t-notification__show--top-right > .t-notification {
+  animation-duration: 0.3s;
+  animation-name: slidein-top-right;
+}
+@keyframes slidein-top-right {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.t-notification__show--bottom-left {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.t-notification__show--bottom-left > .t-notification {
+  animation-duration: 0.3s;
+  animation-name: slidein-bottom-left;
+}
+@keyframes slidein-bottom-left {
+  from {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.t-notification__show--bottom-right {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.t-notification__show--bottom-right > .t-notification {
+  animation-duration: 0.3s;
+  animation-name: slidein-bottom-right;
+}
+@keyframes slidein-bottom-right {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+.t-notification-list__show {
+  position: fixed;
+}