diff --git a/packages/theme/src/scroll-text/index.less b/packages/theme/src/scroll-text/index.less index 449a8da916..1e3d52123a 100644 --- a/packages/theme/src/scroll-text/index.less +++ b/packages/theme/src/scroll-text/index.less @@ -17,14 +17,14 @@ .@{scroll-text-prefix-cls} { &__wrapper { - .component-css-vars-scroll-text(); + .inject-ScrollText-vars(); } width: 300px; - height: var(--ti-scroll-text-height); - line-height: var(--ti-scroll-text-height); - background: var(--ti-scroll-text-bg-color); - margin: var(--ti-scroll-text-margin-vertical) var(--ti-scroll-text-margin-horizontal); + height: var(--tv-ScrollText-height); + line-height: var(--tv-ScrollText-height); + background: var(--tv-ScrollText-bg-color); + margin: 0 auto; overflow: hidden; & &__content { @@ -50,16 +50,6 @@ animation-timing-function: linear; justify-content: center; - // 兼容ie10-ie11 - @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { - display: inline-block; - } - - // 兼容edge - @supports (-ms-ime-align: auto) { - display: inline-block; - } - &.left { animation-name: moveLeft; } @@ -106,12 +96,12 @@ width: fit-content; min-width: 100%; - >div.left { + > div.left { min-width: 100%; animation-name: moveLeftWidthAdapt; } - >div.right { + > div.right { min-width: 100%; animation-name: moveRightWidthAdapt; } @@ -163,25 +153,25 @@ 0% { transform: translateX(100%); } - + 50% { transform: translateX(0); } - + 100% { transform: translateX(-100%); } } - + @keyframes moveRightWidthAdapt { 0% { transform: translateX(-100%); } - + 50% { transform: translateX(0); } - + 100% { transform: translateX(100%); } diff --git a/packages/theme/src/scroll-text/vars.less b/packages/theme/src/scroll-text/vars.less index e483f1cbb5..20a8261820 100644 --- a/packages/theme/src/scroll-text/vars.less +++ b/packages/theme/src/scroll-text/vars.less @@ -10,9 +10,7 @@ * */ -.component-css-vars-scroll-text() { - --ti-scroll-text-height: var(--ti-common-size-height-small, 24px); - --ti-scroll-text-bg-color: #f1f1f1; - --ti-scroll-text-margin-vertical: 0; - --ti-scroll-text-margin-horizontal: auto; +.inject-ScrollText-vars() { + --tv-ScrollText-height: var(--tv-size-height-xs); + --tv-ScrollText-bg-color: var(--tv-color-bg); } diff --git a/packages/theme/src/scrollbar/index.less b/packages/theme/src/scrollbar/index.less index aaa2507dcd..fc968b7430 100644 --- a/packages/theme/src/scrollbar/index.less +++ b/packages/theme/src/scrollbar/index.less @@ -16,7 +16,7 @@ @scrollbar-prefix-cls: ~'@{css-prefix}scrollbar'; .@{scrollbar-prefix-cls} { - .component-css-vars-scrollbar(); + .inject-Scrollbar-vars(); overflow: hidden; position: relative; @@ -45,12 +45,12 @@ width: 0; height: 0; cursor: pointer; - border-radius: var(--ti-scrollbar-thumb-border-radius); - background-color: var(--ti-scrollbar-thumb-bg-color); + border-radius: var(--tv-Scrollbar-thumb-border-radius); + background-color: var(--tv-Scrollbar-thumb-bg-color); transition: 0.3s background-color; &:hover { - background-color: var(--ti-scrollbar-thumb-hover-bg-color); + background-color: var(--tv-Scrollbar-thumb-hover-bg-color); } } @@ -63,9 +63,9 @@ transition: opacity 120ms ease-out; &.is-vertical { - width: var(--ti-scrollbar-vertical-width); + width: var(--tv-Scrollbar-vertical-width); top: 2px; - right: var(--ti-scrollbar-vertical-right); + right: var(--tv-Scrollbar-vertical-right); & > div { width: 100%; diff --git a/packages/theme/src/scrollbar/vars.less b/packages/theme/src/scrollbar/vars.less index 34e12e8493..2ab62c8b57 100644 --- a/packages/theme/src/scrollbar/vars.less +++ b/packages/theme/src/scrollbar/vars.less @@ -22,15 +22,15 @@ * */ -.component-css-vars-scrollbar() { +.inject-Scrollbar-vars() { // 垂直滚动条距离右侧距离 - --ti-scrollbar-vertical-right: 4px; + --tv-Scrollbar-vertical-right: var(--tv-space-sm); // 垂直滚动条宽度 - --ti-scrollbar-vertical-width: 8px; + --tv-Scrollbar-vertical-width: var(--tv-space-md); // 垂直滚动条滑块背景色 - --ti-scrollbar-thumb-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #dbdbdb); + --tv-Scrollbar-thumb-bg-color: var(--tv-color-bg-scrollbar-thumb); // 垂直滚动条滑块悬浮时背景色 - --ti-scrollbar-thumb-hover-bg-color: var(--ti-common-scrollbar-thumb-bg-color, #dbdbdb); + --tv-Scrollbar-thumb-hover-bg-color: var(--tv-color-bg-scrollbar-thumb-hover); // 垂直滚动条滑块圆角 - --ti-scrollbar-thumb-border-radius: var(--ti-common-scrollbar-thumb-border-radius, 4px); + --tv-Scrollbar-thumb-border-radius: var(--tv-border-radius-scrollbar-thumb); } diff --git a/packages/theme/src/tall-storage/index.less b/packages/theme/src/tall-storage/index.less index e811cab019..63821e9efe 100644 --- a/packages/theme/src/tall-storage/index.less +++ b/packages/theme/src/tall-storage/index.less @@ -19,15 +19,15 @@ @storage-item-prefix-cls: ~'@{css-prefix}storage-item'; .@{tall-storage-prefix-cls} { - .component-css-vars-tall-storage(); + .inject-TallStorage-vars(); position: relative; .@{storage-list-style-prefix-cls} { position: absolute; - background-color: var(--ti-tall-storage-bg-color); - box-shadow: var(--ti-common-shadow-2-down); - border-radius: var(--ti-tall-storage-border-radius); + background-color: var(--tv-TallStorage-bg-color); + box-shadow: var(--tv-TallStorage-box-shadow); + border-radius: var(--tv-TallStorage-border-radius); width: 100%; box-sizing: border-box; z-index: 10; @@ -36,18 +36,18 @@ padding: 0; list-style: none; overflow-y: auto; - max-height: calc(var(--ti-tall-storage-item-height) * 5); + max-height: calc(var(--tv-TallStorage-item-height) * 5); .@{storage-item-prefix-cls} { - height: var(--ti-tall-storage-item-height); - line-height: var(--ti-tall-storage-item-height); + height: var(--tv-TallStorage-item-height); + line-height: var(--tv-TallStorage-item-height); padding: 0 8px; white-space: nowrap; &:hover, &.item-hover { cursor: pointer; - background-color: var(--ti-tall-storage-item-bg-color); + background-color: var(--tv-TallStorage-item-bg-color); } } } diff --git a/packages/theme/src/tall-storage/vars.less b/packages/theme/src/tall-storage/vars.less index 997c20dcbe..96b6eecb12 100644 --- a/packages/theme/src/tall-storage/vars.less +++ b/packages/theme/src/tall-storage/vars.less @@ -10,9 +10,15 @@ * */ -.component-css-vars-tall-storage() { - --ti-tall-storage-bg-color: var(--ti-common-color-light, #ffffff); - --ti-tall-storage-border-radius: var(--ti-common-border-radius-normal, 6px); - --ti-tall-storage-item-height: var(--ti-common-size-height-normal, 32px); - --ti-tall-storage-item-bg-color: var(--ti-common-color-hover-background, #f5f5f5); +.inject-TallStorage-vars() { + // 背景颜色 + --tv-TallStorage-bg-color: var(--tv-color-bg-secondary); + // 圆角 + --tv-TallStorage-border-radius: var(--tv-border-radius-md); + // 选项高度 + --tv-TallStorage-item-height: var(--tv-size-height-md); + // 选项背景颜色 + --tv-TallStorage-item-bg-color: var(--tv-color-bg); + // 阴影 + --tv-TallStorage-box-shadow: var(--tv-shadow-2-down); } diff --git a/packages/theme/src/top-box/index.less b/packages/theme/src/top-box/index.less index b5bda1d5b4..86c36eb025 100644 --- a/packages/theme/src/top-box/index.less +++ b/packages/theme/src/top-box/index.less @@ -18,7 +18,7 @@ @top-box-prefix-cls: ~'@{css-prefix}top-box'; .@{top-box-prefix-cls} { - .component-css-vars-top-box(); + .inject-TopBox-vars(); position: fixed; top: 20px; @@ -26,7 +26,7 @@ transform: translateX(-50%); width: 400px; max-height: 600px; - background: var(--ti-top-box-bg-color); + background: var(--tv-TopBox-bg-color); padding: 24px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2); transition: @@ -35,7 +35,7 @@ top 0.4s; & &__icon { - font-size: var(--ti-top-box-icon-font-size, 24px); + font-size: var(--tv-TopBox-icon-font-size); vertical-align: middle; } @@ -74,23 +74,23 @@ } &--success &__icon { - fill: var(--ti-top-box-success-icon-color); + fill: var(--tv-TopBox-success-icon-color); } &--error &__icon { - fill: var(--ti-top-box-error-icon-color); + fill: var(--tv-TopBox-error-icon-color); } &--warning &__icon { - fill: var(--ti-top-box-warning-icon-color); + fill: var(--tv-TopBox-warning-icon-color); } &--help &__icon { - fill: var(--ti-top-box-help-icon-color); + fill: var(--tv-TopBox-help-icon-color); } &--info &__icon { - fill: var(--ti-top-box-info-icon-color); + fill: var(--tv-TopBox-info-icon-color); } &-fade-enter, diff --git a/packages/theme/src/top-box/vars.less b/packages/theme/src/top-box/vars.less index b9b701297f..26f3b51833 100644 --- a/packages/theme/src/top-box/vars.less +++ b/packages/theme/src/top-box/vars.less @@ -10,12 +10,12 @@ * */ -.component-css-vars-top-box() { - --ti-top-box-bg-color: var(--ti-common-color-light, #ffffff); - --ti-top-box-icon-font-size: var(--ti-common-font-size-5, 24px); - --ti-top-box-success-icon-color: var(--ti-common-color-success-normal, #5cb300); - --ti-top-box-error-icon-color: var(--ti-base-color-bg-8, #c7000b); - --ti-top-box-warning-icon-color: var(--ti-common-color-warning-normal, #ff8800); - --ti-top-box-help-icon-color: var(--ti-base-color-brand-6, #191919); - --ti-top-box-info-icon-color: var(--ti-common-color-info-normal, #191919); +.inject-TopBox-vars() { + --tv-TopBox-bg-color: var(--tv-color-bg-secondary); + --tv-TopBox-icon-font-size: 24px; + --tv-TopBox-success-icon-color: var(--tv-color-success-icon); + --tv-TopBox-error-icon-color: var(--tv-color-error-icon); + --tv-TopBox-warning-icon-color: var(--tv-color-warn-icon); + --tv-TopBox-help-icon-color: var(--tv-color-icon-control); + --tv-TopBox-info-icon-color: var(--tv-color-info-icon); }