tdesign-react 0.33.1 → 0.33.2

package/CHANGELOG.md

@@ -5,6 +5,18 @@ toc: false
 spline: explain
 ---
 
+## 🌈 0.33.2 `2022-05-14` 
+### 🚀 Features
+- `Steps`: 支持 separator api & 完善反转逻辑 @HQ-Lin ([#752](https://github.com/Tencent/tdesign-react/pull/752))
+- `Form`:  支持整理嵌套数据 @HQ-Lin ([#758](https://github.com/Tencent/tdesign-react/pull/758)) ([#762](https://github.com/Tencent/tdesign-react/pull/762))
+- `Affix`:  优化滚动逻辑 @ontheroad1992 ([#759](https://github.com/Tencent/tdesign-react/pull/759))
+- `Tabs`:  `TabPanel` 支持 `className` 透传 @HQ-Lin ([#763](https://github.com/Tencent/tdesign-react/pull/763))
+### 🐞 Bug Fixes
+- `Table`: 修复 多级表头 + 列配置 综合示例中，列数量超出一定限制时报错，[issue#713](https://github.com/Tencent/tdesign-vue-next/issues/713) @chaishi ([#757](https://github.com/Tencent/tdesign-react/pull/757))
+- `Tabs`: 修复 `TabPanel` ts 类型报错 @wleven ([#761](https://github.com/Tencent/tdesign-react/pull/761))
+- `DatePicker`: 修复宽度计算问题 @HQ-Lin ([#754](https://github.com/Tencent/tdesign-react/pull/754))
+- `Slider`: 修复 `inputNumberProps` 类型问题  @andyjxli ([#745](https://github.com/Tencent/tdesign-react/pull/745))
+
 ## 🌈 0.33.1 `2022-05-09`
 
 ### 🐞 Bug Fixes

package/dist/tdesign.css

@@ -5517,6 +5517,9 @@ template {
   vertical-align: top;
   margin-right: 8px;
   position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 .t-steps .t-steps-item:last-child {
   -webkit-box-flex: 0;
@@ -5655,6 +5658,16 @@ template {
   margin-bottom: 4px;
   line-height: 22px;
 }
+.t-steps--line-separator .t-steps-item:before,
+.t-steps--line-separator .t-steps-item:after,
+.t-steps--line-separator .t-steps-item__title:after {
+  border-style: solid;
+}
+.t-steps--dashed-separator .t-steps-item:before,
+.t-steps--dashed-separator .t-steps-item:after,
+.t-steps--dashed-separator .t-steps-item__title:after {
+  border-style: dashed;
+}
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item__content {
   margin-top: 4px;
 }
@@ -5667,7 +5680,7 @@ template {
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon__number {
   width: steps-circle-width;
   height: 24px;
-  margin-top: 3px;
+  margin-top: 4px;
 }
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item__icon > .t-icon {
   font-size: 35px;
@@ -5676,17 +5689,101 @@ template {
   content: "";
   display: block;
   width: 9999px;
-  height: 1px;
-  background: var(--td-text-color-placeholder);
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
   position: absolute;
   left: 100%;
   top: 50%;
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
 }
+.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 24px;
+  content: "^";
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  border: 0;
+  font-size: 16px;
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
 .t-steps--horizontal.t-steps--default-anchor .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
-  background: var(--td-brand-color);
-  height: 2px;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item:not(:last-child) .t-steps-item__title:after {
+  content: "";
+  display: block;
+  width: 9999px;
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  height: 24px;
+  content: "^";
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: end;
+      -ms-flex-align: end;
+          align-items: flex-end;
+  border: 0;
+  font-size: 16px;
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child):after {
+  -webkit-transform: rotateZ(-90deg);
+          transform: rotateZ(-90deg);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after,
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--process:not(:last-child) .t-steps-item__title:after,
+.t-steps--horizontal.t-steps--default-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child) .t-steps-item__title:after {
+  border-bottom-width: 2px;
+  border-bottom-color: var(--td-brand-color);
+  color: var(--td-brand-color);
 }
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item {
   overflow: visible;
@@ -5731,26 +5828,130 @@ template {
   text-align: center;
   width: 140px;
 }
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  content: "^";
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  border: 0;
+  font-size: 16px;
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item:not(:last-child)::after {
   content: "";
   display: block;
   width: calc(100% - 16px);
-  height: 1px;
-  background: var(--td-text-color-placeholder);
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
   position: absolute;
   left: calc(140px / 2 + 8px);
   top: 2.5px;
 }
 .t-steps--horizontal.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::after {
-  background: var(--td-brand-color);
-  height: 2px;
+  color: var(--td-brand-color);
+  border-bottom-color: var(--td-brand-color);
+  border-bottom-width: 2px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  content: "^";
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: start;
+      -ms-flex-align: start;
+          align-items: flex-start;
+  border: 0;
+  font-size: 16px;
+  -webkit-transform: rotateZ(90deg);
+          transform: rotateZ(90deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::after {
+  -webkit-transform: rotateZ(-90deg);
+          transform: rotateZ(-90deg);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::after,
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item:not(:last-child)::after {
+  content: "";
+  display: block;
+  width: calc(100% - 16px);
+  border-left: 0;
+  border-top: 0;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--td-text-color-placeholder);
+  position: absolute;
+  left: calc(140px / 2 + 8px);
+  top: 2.5px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+  border-bottom-color: var(--td-brand-color);
+  border-bottom-width: 2px;
+}
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--process:not(:last-child)::after,
+.t-steps--horizontal.t-steps--dot-anchor.t-steps--reverse .t-steps-item--finish:not(:last-child)::after {
+  color: var(--td-brand-color);
+  border-bottom-color: var(--td-brand-color);
+  border-bottom-width: 2px;
 }
 .t-steps--vertical {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
 }
+.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 24px);
+  position: absolute;
+  top: 24px;
+  left: 6px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 16px;
+  -webkit-transform: rotateZ(180deg);
+          transform: rotateZ(180deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
 .t-steps--vertical.t-steps--positive .t-steps-item {
   padding-bottom: 24px;
   margin-bottom: 5px;
@@ -5759,15 +5960,18 @@ template {
   content: "";
   display: block;
   height: 100%;
-  width: 1px;
-  background: var(--td-text-color-placeholder);
+  border-left: 0;
+  border-top: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
   position: absolute;
   top: 35px;
   left: 11px;
 }
 .t-steps--vertical.t-steps--positive .t-steps-item--finish:not(:last-child)::before {
-  background: var(--td-brand-color);
-  width: 2px;
+  border-right-width: 2px;
+  border-right-color: var(--td-brand-color);
+  color: var(--td-brand-color);
 }
 .t-steps--vertical.t-steps--default-anchor .t-steps-item__content {
   margin-top: 2px;
@@ -5776,19 +5980,41 @@ template {
 .t-steps--vertical.t-steps--default-anchor .t-steps-item__title {
   margin-bottom: 4px;
 }
+.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 4px);
+  position: absolute;
+  top: 8px;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 14px;
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--dot-anchor.t-steps--positive.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
 .t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item:not(:last-child)::before {
   content: "";
   display: block;
   height: 100%;
-  width: 1px;
-  background: var(--td-text-color-placeholder);
+  border-bottom: 0;
+  border-left: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
   position: absolute;
-  left: 2.5px;
+  left: 3.5px;
   top: 17px;
 }
 .t-steps--vertical.t-steps--dot-anchor.t-steps--positive .t-steps-item--finish:not(:last-child)::before {
-  background: var(--td-brand-color);
-  width: 2px;
+  color: var(--td-brand-color);
+  border-right-color: var(--td-brand-color);
+  border-right-width: 2px;
 }
 .t-steps--vertical.t-steps--dot-anchor .t-steps-item {
   margin-bottom: 0;
@@ -5814,51 +6040,104 @@ template {
   position: relative;
   top: 5px;
 }
-.t-steps--vertical.t-steps--reverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-          flex-direction: column-reverse;
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 24px);
+  position: absolute;
+  top: 24px;
+  left: 6px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 16px;
+  -webkit-transform: rotateZ(180deg);
+          transform: rotateZ(180deg);
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  -webkit-transform: rotateZ(0);
+          transform: rotateZ(0);
+  margin-top: 4px;
+}
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
 }
 .t-steps--vertical.t-steps--reverse .t-steps-item {
   padding-bottom: 24px;
   margin-bottom: 5px;
 }
-.t-steps--vertical.t-steps--reverse .t-steps-item:not(:first-child)::before {
+.t-steps--vertical.t-steps--reverse .t-steps-item:not(:last-child)::before {
   content: "";
   display: block;
   height: 100%;
-  width: 1px;
-  background: var(--td-text-color-placeholder);
+  border-left: 0;
+  border-bottom: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
   position: absolute;
   top: 35px;
   left: 11px;
 }
-.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:first-child)::before,
-.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:first-child)::before {
-  width: 2px;
-  background: var(--td-brand-color);
+.t-steps--vertical.t-steps--reverse .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse .t-steps-item--finish:not(:last-child)::before {
+  border-right-width: 2px;
+  border-right-color: var(--td-brand-color);
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item:not(:last-child)::before {
+  content: "^";
+  border: 0;
+  height: calc(100% - 4px);
+  position: absolute;
+  top: 8px;
+  left: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 14px;
+  color: var(--td-text-color-placeholder);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
+}
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor.t-steps--arrow-separator .t-steps-item--finish:not(:last-child)::before {
+  color: var(--td-brand-color);
 }
 .t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item {
   margin-bottom: 0;
 }
-.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:first-child)::before {
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:not(:last-child)::before {
   content: "";
   display: block;
   height: 100%;
-  width: 1px;
-  background: var(--td-text-color-placeholder);
+  border-bottom: 0;
+  border-left: 0;
+  border-right-width: 1px;
+  border-right-color: var(--td-text-color-placeholder);
   position: absolute;
   left: 3.5px;
   top: 17px;
 }
-.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:first-child::before {
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item:last-child::before {
   display: none;
 }
-.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:first-child)::before,
-.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:first-child)::before {
-  width: 2px;
-  background: var(--td-brand-color);
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--process:not(:last-child)::before,
+.t-steps--vertical.t-steps--reverse.t-steps--dot-anchor .t-steps-item--finish:not(:last-child)::before {
+  border-right-width: 2px;
+  border-right-color: var(--td-brand-color);
+  color: var(--td-brand-color);
 }
 
 .t-message {
@@ -7846,6 +8125,10 @@ ul.t-select-option-group__header,
 .t-table__tree-op-icon {
   margin-right: 16px;
   cursor: pointer;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  vertical-align: text-bottom;
 }
 .t-table__tree-op-icon:hover {
   color: var(--td-brand-color);
@@ -8710,83 +8993,8 @@ ul.t-select-option-group__header,
             transform: translate3d(0, 0, 0);
   }
 }
-.t-notification-list__show-transition--top-left {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-.t-notification-list__show-transition--top-left .notification-slide-fade-enter-active,
-.t-notification-list__show-transition--top-left .notification-slide-fade-leave-active {
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-.t-notification-list__show-transition--top-left .notification-slide-fade-enter-from,
-.t-notification-list__show-transition--top-left .notification-slide-fade-leave-to {
-  -webkit-transform: translate3d(-100%, 0, 0);
-          transform: translate3d(-100%, 0, 0);
-  opacity: 0;
-}
-.t-notification-list__show-transition--top-right {
-  position: fixed;
-  top: 0;
-  right: 0;
-}
-.t-notification-list__show-transition--top-right .notification-slide-fade-enter-active,
-.t-notification-list__show-transition--top-right .notification-slide-fade-leave-active {
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-.t-notification-list__show-transition--top-right .notification-slide-fade-enter-from,
-.t-notification-list__show-transition--top-right .notification-slide-fade-leave-to {
-  -webkit-transform: translate3d(100%, 0, 0);
-          transform: translate3d(100%, 0, 0);
-  opacity: 0;
-}
-.t-notification-list__show-transition--bottom-left {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-          flex-direction: column-reverse;
-}
-.t-notification-list__show-transition--bottom-left .notification-slide-fade-enter-active,
-.t-notification-list__show-transition--bottom-left .notification-slide-fade-leave-active {
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-.t-notification-list__show-transition--bottom-left .notification-slide-fade-enter-from,
-.t-notification-list__show-transition--bottom-left .notification-slide-fade-leave-to {
-  -webkit-transform: translate3d(-100%, 0, 0);
-          transform: translate3d(-100%, 0, 0);
-  opacity: 0;
-}
-.t-notification-list__show-transition--bottom-right {
+.t-notification-list__show {
   position: fixed;
-  bottom: 0;
-  right: 0;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-      -ms-flex-direction: column-reverse;
-          flex-direction: column-reverse;
-}
-.t-notification-list__show-transition--bottom-right .notification-slide-fade-enter-active,
-.t-notification-list__show-transition--bottom-right .notification-slide-fade-leave-active {
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-}
-.t-notification-list__show-transition--bottom-right .notification-slide-fade-enter-from,
-.t-notification-list__show-transition--bottom-right .notification-slide-fade-leave-to {
-  -webkit-transform: translate3d(100%, 0, 0);
-          transform: translate3d(100%, 0, 0);
-  opacity: 0;
 }
 
 a.t-menu__item {