diff --git a/packages/theme/src/mixins/progress.less b/packages/theme/src/mixins/progress.less deleted file mode 100644 index 11c8d8c271..0000000000 --- a/packages/theme/src/mixins/progress.less +++ /dev/null @@ -1,25 +0,0 @@ -/** -* Copyright (c) 2022 - present TinyVue Authors. -* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. -* -* Use of this source code is governed by an MIT-style license. -* -* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, -* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR -* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. -* -*/ - -@import '../custom.less'; - -@progress-prefix-cls: ~'@{css-prefix}progress'; - -.progress-status(@color) { - .@{progress-prefix-cls}-bar__inner { - background-color: @color; - } - - .@{progress-prefix-cls}__text svg { - fill: @color; - } -} diff --git a/packages/theme/src/progress/aurora-theme.js b/packages/theme/src/progress/aurora-theme.js index 15cb3bdf1a..02477e7d65 100644 --- a/packages/theme/src/progress/aurora-theme.js +++ b/packages/theme/src/progress/aurora-theme.js @@ -1,3 +1,3 @@ export const tinyProgressAuroraTheme = { - 'ti-progress-warning-bg-color': '#fa8c16' + 'tv-Progress-bg-color-warning': '#fa8c16' } diff --git a/packages/theme/src/progress/index.less b/packages/theme/src/progress/index.less index 8436e5d15b..ae3d9d8ec8 100644 --- a/packages/theme/src/progress/index.less +++ b/packages/theme/src/progress/index.less @@ -10,67 +10,110 @@ * */ -@import '../mixins/progress.less'; @import '../custom.less'; @import './vars.less'; @progress-prefix-cls: ~'@{css-prefix}progress'; .@{progress-prefix-cls} { - .component-css-vars-progress(); + .inject-Progress-vars(); position: relative; + display: flex; + align-items: center; line-height: 1; - display: flex; // smb新增 - align-items: center; // smb新增 + + /** 横向条自身默认场景 */ + &-bar { + width: 100%; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + &__outer { + position: relative; + height: 6px; + overflow: hidden; + vertical-align: middle; + background-color: var(--tv-Progress-outer-bg-color); + } + + &__inner { + position: absolute; + left: 0; + top: 0; + height: 100%; + line-height: 1; + text-align: right; + white-space: nowrap; + background-color: var(--tv-Progress-inner-bg-color); + transition: width 0.6s ease; + + &::after { + content: ''; + height: 100%; + } + } + + &__innerText { + margin: 0 5px; + font-size: var(--tv-Progress-inner-font-size); + color: var(--tv-Progress-inner-text-color); + } + + &, + &__inner::after, + &__innerText { + display: inline-block; + vertical-align: middle; + } + } + + /** 横向条状态场景 */ + .progress-status(@color) { + .@{progress-prefix-cls}-bar__inner { + background-color: @color; + } + + .@{progress-prefix-cls}__text svg { + fill: @color; + } + } &.is-success { - .progress-status(var(--ti-progress-success-bg-color)); + .progress-status(var(--tv-Progress-bg-color-success)); } &.is-warning { - .progress-status(var(--ti-progress-warning-bg-color)); + .progress-status(var(--tv-Progress-bg-color-warning)); } &.is-exception { - .progress-status(var(--ti-progress-exception-bg-color)); + .progress-status(var(--tv-Progress-bg-color-exception)); } + /** 右侧文字场景 */ &__text { - font-size: var(--ti-progress-text-font-size); - color: var(--ti-progress-text-color); display: inline-block; - vertical-align: middle; - margin-left: var(--ti-progress-bar-text-margin-left); // smb新增 + margin-left: var(--tv-Progress-right-text-margin-left); + font-size: 14px; line-height: 1; + vertical-align: middle; white-space: nowrap; + color: var(--tv-Progress-right-text-color); i { - vertical-align: middle; display: inline-block; + vertical-align: middle; } } - &--circle, - &--dashboard { - display: inline-block; - - .@{progress-prefix-cls}__text { - top: 50%; - position: absolute; - width: 100%; - text-align: center; - margin: 0; - transform: translate(0, -50%); - left: 0; - - i { - display: inline-block; - vertical-align: middle; - } - } + /** 内侧文字场景 */ + &--text-inside &-bar { + margin-right: 0; + padding-right: 0; } + /** 隐藏文字场景 */ &--without-text &__text { display: none; } @@ -81,53 +124,25 @@ display: block; } - &--text-inside &-bar { - padding-right: 0; - margin-right: 0; - } - - &-bar { - width: 100%; - -webkit-box-sizing: border-box; - box-sizing: border-box; - - &__outer { - height: 6px; - background-color: var(--ti-progress-bar-outer-bg-color); - overflow: hidden; - position: relative; - vertical-align: middle; - } + /** 圆环类型场景 */ + &--circle, + &--dashboard { + display: inline-block; - &__inner { - background-color: var(--ti-progress-bar-inner-bg-color); - text-align: right; - left: 0; + .@{progress-prefix-cls}__text { position: absolute; - top: 0; - height: 100%; - line-height: 1; - white-space: nowrap; - transition: width 0.6s ease; + left: 0; + top: 50%; + transform: translate(0, -50%); + margin: 0; + width: 100%; + text-align: center; - &::after { - content: ''; - height: 100%; + i { + display: inline-block; + vertical-align: middle; } } - - &__innerText { - color: var(--ti-progress-bar-inner-text-color); - font-size: var(--ti-progress-text-font-size); - margin: 0 5px; - } - - &, - &__inner::after, - &__innerText { - display: inline-block; - vertical-align: middle; - } } } diff --git a/packages/theme/src/progress/old-theme.js b/packages/theme/src/progress/old-theme.js index 7f99c5f8b1..2b622cd8ba 100644 --- a/packages/theme/src/progress/old-theme.js +++ b/packages/theme/src/progress/old-theme.js @@ -1,6 +1,6 @@ export const tinyProgressOldTheme = { - 'ti-progress-exception-bg-color': 'var(--ti-common-bg-primary, #c7000b)', - 'ti-progress-bar-text-margin-left': 'var(--ti-common-space-2x, 8px)', - 'ti-progress-bar-inner-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)', - 'ti-progress-bar-outer-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)' + 'tv-Progress-bg-color-exception': 'var(--ti-common-bg-primary, #c7000b)', + 'tv-Progress-right-text-margin-left': 'var(--ti-common-space-2x, 8px)', + 'tv-Progress-inner-bg-color': 'var(--ti-common-color-bg-emphasize, #5e7ce0)', + 'tv-Progress-outer-bg-color': 'var(--ti-common-color-bg-disabled, #f5f5f6)' } diff --git a/packages/theme/src/progress/vars.less b/packages/theme/src/progress/vars.less index 868b1b0a1b..0a1e4e0f3c 100644 --- a/packages/theme/src/progress/vars.less +++ b/packages/theme/src/progress/vars.less @@ -10,23 +10,28 @@ * */ -.component-css-vars-progress() { - // 进度条默认文本色 - --ti-progress-text-color: var(--ti-common-color-text-primary, #191919); - // 进度条内层文本字号 - --ti-progress-text-font-size: var(--ti-common-font-size-base, 14px); - // 横向条未完成部分背景色 - --ti-progress-bar-outer-bg-color: #E6E6E6; - // 横向条已完成部分背景色 - --ti-progress-bar-inner-bg-color: var(--ti-common-color-data-4, #5cb300); +.inject-Progress-vars() { + /** 横向条自身默认场景 */ + // 横向条未完成背景色 + --tv-Progress-outer-bg-color: var(--tv-color-bg-gray-2, #e6e6e6); + // 横向条已完成背景色 + --tv-Progress-inner-bg-color: var(--tv-color-success-bg, #5cb300); + // 横向条内层文本字号 + --tv-Progress-inner-font-size: var(--tv-font-size-md, 14px); // 横向条内层文本色 - --ti-progress-bar-inner-text-color: var(--ti-common-color-light, #ffffff); + --tv-Progress-inner-text-color: var(--tv-color-text-white, #ffffff); + + /** 横向条状态场景 */ + // success状态横向条已完成背景色 + --tv-Progress-bg-color-success: var(--tv-color-success-bg, #5cb300); + // warning状态横向条已完成背景色 + --tv-Progress-bg-color-warning: var(--tv-color-warn-bg, #ff8800); + // exception状态横向条已完成背景色 + --tv-Progress-bg-color-exception: #c7000b; + + /** 横向条右侧文字场景 */ // 横向条右侧文字左外边距 - --ti-progress-bar-text-margin-left: var(--ti-common-space-3x, 12px); - // success状态横向条已完成部分背景色 - --ti-progress-success-bg-color: var(--ti-common-color-success-normal, #5cb300); - // warning状态横向条已完成部分背景色 - --ti-progress-warning-bg-color: var(--ti-common-color-warning-normal, #ff8800); - // exception状态横向条已完成部分背景色 - --ti-progress-exception-bg-color: #c7000b; + --tv-Progress-right-text-margin-left: var(--tv-space-lg, 12px); + // 进度条右侧文本色 + --tv-Progress-right-text-color: var(--tv-color-text, #191919); }