tdesign-react 0.27.0 → 0.28.0

package/dist/tdesign.css

@@ -331,6 +331,14 @@ template {
 }
 /* stylelint-enable */
 
+:root {
+  --td-screen-xs: 320px;
+  --td-screen-sm: 768px;
+  --td-screen-md: 992px;
+  --td-screen-lg: 1200px;
+  --td-screen-xl: 1400px;
+  --td-screen-xxl: 1880px;
+}
 .narrow-scrollbar::-webkit-scrollbar {
   width: 8px;
   background: transparent;
@@ -5137,27 +5145,6 @@ template {
 .t-input-number .t-input {
   color: var(--td-text-color-primary);
 }
-.t-input-number .t-input__inner {
-  text-align: center;
-}
-.t-input-number .t-input__inner.t-is-disabled {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::-webkit-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::-moz-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled:-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::-ms-input-placeholder {
-  color: var(--td-text-color-disabled);
-}
-.t-input-number .t-input__inner.t-is-disabled::placeholder {
-  color: var(--td-text-color-disabled);
-}
 .t-input-number__decrease,
 .t-input-number__increase {
   width: 32px;
@@ -5248,9 +5235,6 @@ template {
   padding: 0;
   border-radius: 3px;
 }
-.t-input-number--normal .t-input__inner {
-  text-align: left;
-}
 .t-input-number--normal.t-is-disabled {
   cursor: no-drop;
   color: var(--td-text-color-disabled);
@@ -5339,9 +5323,6 @@ template {
   width: 88px;
   padding: 0;
 }
-.t-input-number.t-is-controls-right.t-size-l {
-  width: 104px;
-}
 .t-input-number.t-is-controls-right:hover .t-input-number__decrease,
 .t-input-number.t-is-controls-right:hover .t-input-number__increase {
   opacity: 1;
@@ -5361,7 +5342,7 @@ template {
 .t-input-number.t-is-controls-right .t-input-number__decrease,
 .t-input-number.t-is-controls-right .t-input-number__increase {
   width: 32px;
-  height: calc(50% - 2px);
+  height: 14px;
   border: 0;
   left: initial;
   top: initial;
@@ -5418,44 +5399,32 @@ template {
 .t-input-number.t-is-controls-right .t-input-number__increase.t-is-disabled::placeholder {
   color: var(--td-text-color-disabled);
 }
-.t-input-number.t-is-controls-right .t-input-number__decrease {
-  bottom: 1px;
-  border-bottom-right-radius: calc(3px - 1px);
-}
 .t-input-number.t-is-controls-right .t-input-number__increase {
   top: 1px;
   border-top-right-radius: calc(3px - 1px);
 }
-.t-align-left > .t-input__inner {
-  text-align: left;
+.t-input-number.t-is-controls-right .t-input-number__decrease {
+  top: 17px;
+  border-bottom-right-radius: calc(3px - 1px);
 }
-.t-align-center > .t-input__inner {
-  text-align: center;
+.t-input-number.t-is-controls-right.t-size-l .t-input-number__increase,
+.t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease {
+  height: 18px;
 }
-.t-align-right > .t-input__inner {
-  text-align: right;
+.t-input-number.t-is-controls-right.t-size-l .t-input-number__decrease {
+  top: 21px;
 }
 .t-input-number:not(.t-input-number--column) > .t-input-number__decrease + .t-input__wrap {
   margin-left: 4px;
 }
-.t-input-number__tips {
-  height: auto;
-  min-height: 24px;
-  line-height: 20px;
-  font-size: 12px;
-  margin-left: 4px;
-}
-.t-input-number__tips--normal {
-  color: var(--td-text-color-placeholder);
-}
-.t-input-number__tips--success {
-  color: var(--td-success-color);
+.t-input-number.t-input-number--auto-width {
+  width: auto;
 }
-.t-input-number__tips--warning {
-  color: var(--td-warning-color);
+.t-input-number.t-input-number--auto-width.t-is-controls-right {
+  min-width: 88px;
 }
-.t-input-number__tips--error {
-  color: var(--td-error-color);
+.t-input-number.t-input-number--auto-width:not(.t-input-number--column) .t-input-number__increase {
+  right: -4px;
 }
 
 .default-step-icon {
@@ -6215,18 +6184,29 @@ a .t-tag:active {
 }
 .t-tag-input:hover .t-input__inner,
 .t-tag-input .t-input--focused .t-input__inner {
-  min-width: 60px;
+  min-width: 40px;
 }
 .t-tag-input .t-tag-input__prefix,
 .t-tag-input .t-input__prefix:empty {
   margin-left: 4px;
 }
+.t-tag-input.t-input--auto-width {
+  padding-right: 4px;
+}
+.t-tag-input.t-input--auto-width .t-tag:last-child {
+  margin-right: 0;
+}
+.t-tag-input.t-input--auto-width:hover .t-input__prefix:not(:empty) + .t-input__inner,
+.t-tag-input.t-input--auto-width .t-is-focused .t-input__prefix:not(:empty) + .t-input__inner {
+  margin-left: 4px;
+}
 .t-tag-input__suffix-clear {
   cursor: pointer;
 }
 .t-tag-input--break-line.t-input {
   display: block;
   height: auto;
+  padding-right: 24px;
 }
 .t-tag-input--break-line.t-input.t-input--prefix > .t-input__prefix {
   display: inline;
@@ -6383,7 +6363,7 @@ a .t-tag:active {
       -ms-flex-align: center;
           align-items: center;
 }
-.t-select .t-select__input {
+.t-select .t-input__wrap {
   margin-left: 4px;
   -webkit-box-flex: 1;
       -ms-flex: 1;
@@ -8343,6 +8323,84 @@ 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 {
+  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 {
   text-decoration: none;
@@ -8383,6 +8441,7 @@ a.t-menu__item:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  overflow: auto hidden;
 }
 .t-head-menu .t-menu__operations:not(:empty) {
   position: relative;
@@ -8649,6 +8708,7 @@ a.t-menu__item:active {
 .t-default-menu__inner .t-menu {
   padding: 16px 8px;
   position: relative;
+  overflow: hidden auto;
   -webkit-box-flex: 1;
       -ms-flex: 1;
           flex: 1;
@@ -8793,6 +8853,27 @@ a.t-menu__item:active {
   -webkit-transform: scaleY(-1);
           transform: scaleY(-1);
 }
+.t-menu::-webkit-scrollbar {
+  display: none;
+}
+.t-menu__spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__spacer--left::before {
+  left: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__spacer--top::before {
+  top: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
 .t-menu__item {
   position: relative;
   display: -webkit-box;
@@ -8801,8 +8882,8 @@ a.t-menu__item:active {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
-  height: 64px;
-  line-height: 64px;
+  height: 40px;
+  line-height: 40px;
   text-align: center;
   color: var(--td-font-gray-2);
   cursor: pointer;
@@ -8816,6 +8897,27 @@ a.t-menu__item:active {
 .t-menu__item ::selection {
   background: transparent;
 }
+.t-menu__item-spacer {
+  overflow: unset;
+}
+.t-menu__item-spacer::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+}
+.t-menu__item-spacer--right::before {
+  right: -16px;
+  width: 16px;
+  top: 0;
+  bottom: 0;
+}
+.t-menu__item-spacer--bottom::before {
+  bottom: -20px;
+  left: 0;
+  right: 0;
+  height: 20px;
+}
 .t-menu__item a {
   color: unset;
   text-decoration: none;
@@ -8934,6 +9036,9 @@ a.t-menu__item:active {
   padding: 8px;
   height: 100%;
 }
+.t-menu__popup .t-fake-arrow {
+  margin-left: 8px;
+}
 .t-menu__popup.t-is-vertical {
   max-height: unset;
   width: 0;
@@ -8944,6 +9049,19 @@ a.t-menu__item:active {
 .t-menu__popup.t-is-vertical.t-is-opened {
   width: var(--popup-width, 216px);
 }
+.t-menu__popup.t-is-vertical .t-menu__item {
+  padding-left: 16px;
+  padding-right: 16px;
+  margin: 4px 0;
+}
+.t-menu__popup.t-is-horizontal .t-menu__item {
+  padding-left: 16px;
+  padding-right: 16px;
+  white-space: nowrap;
+}
+.t-menu__popup.t-is-horizontal li + li {
+  margin-top: 4px;
+}
 .t-menu__popup.t-is-opened {
   max-height: var(--popup-max-height, 364px);
   opacity: 1;
@@ -11123,6 +11241,26 @@ small.t-upload__tips-error {
   -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
           box-shadow: 0 0 0 2px var(--td-success-color-focus);
 }
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-icon,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-input .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-success-color);
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-cascader .t-input,
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-success-color);
+}
 .t-form__controls.t-form--success-border.t-is-success .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-success-color-focus);
           box-shadow: 0 0 0 2px var(--td-success-color-focus);
@@ -11201,6 +11339,26 @@ small.t-upload__tips-error {
   -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
           box-shadow: 0 0 0 2px var(--td-warning-color-focus);
 }
+.t-is-warning .t-form__controls-content .t-input .t-icon,
+.t-is-warning .t-form__controls-content .t-select .t-icon,
+.t-is-warning .t-form__controls-content .t-radio-button .t-icon,
+.t-is-warning .t-form__controls-content .t-cascader .t-icon,
+.t-is-warning .t-form__controls-content .t-textarea__inner .t-icon,
+.t-is-warning .t-form__controls-content .t-input .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-select .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-is-warning .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-warning-color);
+}
+.t-is-warning .t-form__controls-content .t-cascader .t-input,
+.t-is-warning .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-is-warning .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-warning-color);
+}
 .t-is-warning .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-warning-color-focus);
           box-shadow: 0 0 0 2px var(--td-warning-color-focus);
@@ -11231,6 +11389,26 @@ small.t-upload__tips-error {
   -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
           box-shadow: 0 0 0 2px var(--td-error-color-focus);
 }
+.t-is-error .t-form__controls-content .t-input .t-icon,
+.t-is-error .t-form__controls-content .t-select .t-icon,
+.t-is-error .t-form__controls-content .t-radio-button .t-icon,
+.t-is-error .t-form__controls-content .t-cascader .t-icon,
+.t-is-error .t-form__controls-content .t-textarea__inner .t-icon,
+.t-is-error .t-form__controls-content .t-input .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-select .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-radio-button .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-cascader .t-fake-arrow,
+.t-is-error .t-form__controls-content .t-textarea__inner .t-fake-arrow {
+  color: var(--td-error-color);
+}
+.t-is-error .t-form__controls-content .t-cascader .t-input,
+.t-is-error .t-form__controls-content .t-select .t-input {
+  -webkit-box-shadow: none;
+          box-shadow: none;
+}
+.t-is-error .t-form__controls-content .t-select > .t-select__right-icon:not(.t-select__right-icon-clear) {
+  color: var(--td-error-color);
+}
 .t-is-error .t-form__controls-content .t-textarea__inner.t-is-focused {
   -webkit-box-shadow: 0 0 0 2px var(--td-error-color-focus);
           box-shadow: 0 0 0 2px var(--td-error-color-focus);
@@ -13184,47 +13362,18 @@ small.t-upload__tips-error {
 /* Swiper */
 .t-swiper {
   position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  opacity: 1;
-  -webkit-transition: opacity 0.2s;
-  transition: opacity 0.2s;
-}
-.t-swiper.t-is-hidden {
-  /* 隐藏 */
-  display: none;
-}
-.t-swiper--closing {
-  opacity: 0;
-}
-.t-swiper .t-swiper__trigger-wrap {
-  color: var(--td-text-color-disabled);
 }
-.t-swiper .t-swiper__trigger--active {
-  color: var(--td-text-color-secondary);
+.t-swiper__wrap {
+  display: block;
+  position: relative;
+  height: 100%;
 }
 .t-swiper__content {
-  -webkit-box-flex: 1;
-      -ms-flex: 1 1 auto;
-          flex: 1 1 auto;
+  position: relative;
   z-index: 1;
   overflow: hidden;
-  height: 48px;
-}
-.t-swiper__swiper-wrap {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  left: 0;
 }
-.t-swiper__swiper-wrap > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
-}
-.t-swiper__swiper-wrap--horizontal {
+.t-swiper__container {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
@@ -13233,63 +13382,831 @@ small.t-upload__tips-error {
   -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
-  left: 0;
+  height: 100%;
+  z-index: 1;
 }
-.t-swiper__swiper-wrap--horizontal > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.t-swiper__container__item {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
 }
-.t-swiper__swiper-wrap--vertical {
-  position: relative;
+.t-swiper__arrow {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  top: 0;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.t-swiper__swiper-wrap--vertical > * {
-  -webkit-box-flex: 1;
-      -ms-flex: 1;
-          flex: 1;
+.t-swiper__arrow svg.t-icon {
+  width: 100%;
+  height: 100%;
 }
-.t-swiper__trigger-wrap {
-  position: absolute;
-  right: 32px;
-  z-index: 1;
-  -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
-          flex: 0 0 auto;
-  padding: 16px 8px;
-  margin: 0;
-  font-size: 20px;
-  line-height: 20px;
-  height: 48px;
+.t-swiper__arrow svg.t-icon::before {
+  font-size: 24px;
 }
-.t-swiper__trigger-wrap > li {
-  display: inline-block;
-  list-style-type: none;
+.t-swiper__arrow--default .t-swiper__arrow-left {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-white-2);
   cursor: pointer;
+  left: 16px;
 }
-.t-swiper__trigger-wrap > li::before {
-  content: "\2022";
+.t-swiper__arrow--default .t-swiper__arrow-left:hover {
+  color: var(--td-bg-color-container);
+  background-color: var(--td-font-white-4);
 }
-.t-swiper__close {
+.t-swiper__arrow--default .t-swiper__arrow-left:active {
+  background-color: var(--td-font-white-3);
+}
+.t-swiper__arrow--default .t-swiper__arrow-right {
+  position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 24px;
+  height: 24px;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-white-2);
+  cursor: pointer;
+  right: 16px;
+}
+.t-swiper__arrow--default .t-swiper__arrow-right:hover {
+  color: var(--td-bg-color-container);
+  background-color: var(--td-font-white-4);
+}
+.t-swiper__arrow--default .t-swiper__arrow-right:active {
+  background-color: var(--td-font-white-3);
+}
+.t-swiper-card .t-swiper__container {
+  display: block;
+}
+.t-swiper-card .t-swiper__container .t-is-active {
+  z-index: 2;
+}
+.t-swiper-card .t-swiper__card {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 41.5%;
+  height: 100%;
+  z-index: 0;
+}
+.t-swiper-fade .t-swiper__container {
+  display: block;
+}
+.t-swiper-fade .t-swiper__fade {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.t-swiper__navigation {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  bottom: 0;
+  margin: 0;
+  padding: 0;
+  z-index: 2;
+}
+.t-swiper__navigation > li {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+  list-style-type: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 0 0 0 6px;
+  padding: 18px 0;
+  width: 14px;
+  height: auto;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 100%;
+  height: 3px;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-left: 0;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  width: 24px;
+}
+.t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--vertical .t-swiper__container {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-swiper--vertical .t-swiper__navigation {
   position: absolute;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  left: auto;
   right: 0;
-  z-index: 100;
-  width: 32px;
-  height: 48px;
-  padding: 16px 24px 16px 4px;
-  font-size: 14px;
-  color: var(--td-text-color-placeholder);
+  bottom: auto;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 6px 0 0 0;
+  padding: 0 18px;
+  width: auto;
+  height: 14px;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 3px;
+  height: 100%;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-top: 0;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  height: 24px;
+}
+.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--outside .t-swiper__navigation {
+  bottom: -36px;
+}
+.t-swiper--outside .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
   cursor: pointer;
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation {
+  bottom: auto;
+  right: -36px;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--outside.t-swiper--vertical .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--inside .t-swiper__navigation {
+  bottom: 0;
+}
+.t-swiper--inside .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -36px;
+  height: 24px;
+  line-height: 24px;
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--inside .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 16px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--large .t-swiper__arrow i.t-icon::before {
+  font-size: 32px;
+}
+.t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-left {
+  width: 32px;
+  height: 32px;
+  left: 24px;
+}
+.t-swiper--large .t-swiper__arrow--default .t-swiper__arrow-right {
+  width: 32px;
+  height: 32px;
+  right: 24px;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 0 0 0 9px;
+  padding: 27px 0;
+  width: 21px;
+  height: auto;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 100%;
+  height: 4px;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-left: 0;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  width: 36px;
+}
+.t-swiper--large .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -40px;
+  height: 28px;
+  line-height: 28px;
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--large .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 20px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation {
+  bottom: -54px;
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--large.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 9px 0 0 0;
+  padding: 0 27px;
+  width: auto;
+  height: 21px;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 4px;
+  height: 100%;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-top: 0;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  height: 36px;
+}
+.t-swiper--large.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation {
+  right: -54px;
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--large.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small .t-swiper__arrow i.t-icon::before {
+  font-size: 16px;
+}
+.t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-left {
+  width: 16px;
+  height: 16px;
+  left: 8px;
+}
+.t-swiper--small .t-swiper__arrow--default .t-swiper__arrow-right {
+  width: 16px;
+  height: 16px;
+  right: 8px;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 0 0 0 3px;
+  padding: 9px 0;
+  width: 9px;
+  height: auto;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 100%;
+  height: 2px;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-left: 0;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  width: 15px;
+}
+.t-swiper--small .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small .t-swiper__navigation--fraction {
+  position: absolute;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  top: auto;
+  right: auto;
+  bottom: -34px;
+  height: 22px;
+  line-height: 22px;
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-left:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  z-index: 2;
+  background-color: transparent;
+  color: var(--td-font-gray-4);
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:hover {
+  color: var(--td-brand-color-8);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__arrow-right:active {
+  color: var(--td-brand-color-9);
+}
+.t-swiper--small .t-swiper__navigation--fraction .t-swiper__navigation-text-fraction {
+  display: inline-block;
+  font-size: 14px;
+  color: var(--td-font-gray-3);
+  margin: 0;
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation {
+  bottom: -18px;
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item {
+  cursor: pointer;
+  margin: 3px 0 0 0;
+  padding: 0 9px;
+  width: auto;
+  height: 9px;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  width: 2px;
+  height: 100%;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item:nth-child(1) {
+  margin-top: 0;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background: var(--td-font-white-4);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-font-white-2);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active {
+  height: 15px;
+}
+.t-swiper--small.t-swiper--vertical .t-swiper__navigation-bars .t-swiper__navigation-item.t-is-active span {
+  background-color: var(--td-bg-color-container);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation {
+  right: -18px;
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span {
+  background-color: var(--td-font-gray-4);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:hover {
+  background-color: var(--td-brand-color-8);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-swiper__navigation-item span:active {
+  background-color: var(--td-brand-color-9);
+}
+.t-swiper--small.t-swiper--vertical.t-swiper--outside .t-swiper__navigation-bars .t-is-active span {
+  background-color: var(--td-brand-color-9);
 }
 
 .t-comment {