From a853bb1d2dd588814c1622a878cdbeec9f1d3098 Mon Sep 17 00:00:00 2001 From: BeADre Date: Sat, 16 Jan 2021 13:27:19 +0800 Subject: [PATCH] fix(progress): modify default track color --- packages/varlet-ui/src/progress/docs/en_US.md | 2 +- packages/varlet-ui/src/progress/docs/zh_CN.md | 2 +- packages/varlet-ui/src/progress/progress.less | 143 +++++++++--------- packages/varlet-ui/src/progress/props.ts | 1 + 4 files changed, 74 insertions(+), 74 deletions(-) diff --git a/packages/varlet-ui/src/progress/docs/en_US.md b/packages/varlet-ui/src/progress/docs/en_US.md index 8bcf4b16265..03cacca1b8c 100644 --- a/packages/varlet-ui/src/progress/docs/en_US.md +++ b/packages/varlet-ui/src/progress/docs/en_US.md @@ -202,7 +202,7 @@ Use `show-track` to hide Progress-Track. | value | completion value | _number_ | `0` | | line-width | To set width of the progress bar | _number_ | _string_ | `4` | | color | To set color of the progress bar | _string_ | `#005CAF` | -| track-color | To set color of the progress track | _string_ | `#afd9ff` | +| track-color | To set color of the progress track | _string_ | `#d8d8d8` | | ripple | To set loading style for progress | _boolean_ | `false` | | show-action | Whether the `action` is visible or not | _boolean_ | `false` | diff --git a/packages/varlet-ui/src/progress/docs/zh_CN.md b/packages/varlet-ui/src/progress/docs/zh_CN.md index 8dcbb57094d..893e30edd25 100644 --- a/packages/varlet-ui/src/progress/docs/zh_CN.md +++ b/packages/varlet-ui/src/progress/docs/zh_CN.md @@ -202,7 +202,7 @@ export default defineComponent({ | value | progress 的进度 | _number_ | `0` | | line-width | progress 的线宽 | _number_ | _string_ | `4` | | color | progress 的颜色 | _string_ | `#005CAF` | -| track-color | progress 轨道的颜色 | _string_ | `#afd9ff` | +| track-color | progress 轨道的颜色 | _string_ | `#d8d8d8` | | ripple | 水波纹加载效果 | _boolean_ | `false` | | show-action | 是否显示 action | _boolean_ | `false` | diff --git a/packages/varlet-ui/src/progress/progress.less b/packages/varlet-ui/src/progress/progress.less index 7b9a51cba52..88ce496a730 100644 --- a/packages/varlet-ui/src/progress/progress.less +++ b/packages/varlet-ui/src/progress/progress.less @@ -1,87 +1,86 @@ -@import "../styles/var"; +@import '../styles/var'; -@ripple-color: #fff; +@ripple-color: #ffffff; .var-progress { - position: relative; - font-size: @font-size-sm; + position: relative; + font-size: @font-size-sm; - &-linear { - display: flex; - align-items: center; + &-linear { + display: flex; + align-items: center; - &__block { - flex: 1; - position: relative; - overflow: hidden; - } + &__block { + flex: 1; + position: relative; + overflow: hidden; + } - &__background, &__certain { - width: 100%; - height: 100%; - background-color: lighten(@color-primary, 50%); - } + &__background, + &__certain { + width: 100%; + height: 100%; + } - &__ripple { - &:after { - position: absolute; - width: 0; - background-color: @ripple-color; - height: 100%; - opacity: 0; - animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; - content: ""; - } - } + &__ripple { + &:after { + position: absolute; + width: 0; + background-color: @ripple-color; + height: 100%; + opacity: 0; + animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; + content: ''; + } + } - &__certain { - position: absolute; - background-color: @color-primary; - top: 0; - left: 0; - transition: width .2s; - } + &__certain { + position: absolute; + background-color: @color-primary; + top: 0; + left: 0; + transition: width 0.2s; + } - &__action { - margin-left: 8px; - flex: 0; - } + &__action { + margin-left: 8px; + flex: 0; + } - @keyframes ripple { - 0% { - width: 0; - opacity: 0.1; - } - 20% { - width: 0; - opacity: 0.5; - } - 80% { - width: 100%; - opacity: 0; - } - } + @keyframes ripple { + 0% { + width: 0; + opacity: 0.1; + } + 20% { + width: 0; + opacity: 0.5; + } + 80% { + width: 100%; + opacity: 0; + } + } + } - } + &-circle { + position: relative; - &-circle { - position: relative; + &__background { + stroke: lighten(@color-primary, 50%); + } - &__background { - stroke: lighten(@color-primary, 50%); - } + &__certain { + transition: all 0.2s; + stroke: @color-primary; + position: absolute; + } - &__certain { - transition: all .2s; - stroke: @color-primary; - position: absolute; - } - - &__action { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - } - } + &__action { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + } } diff --git a/packages/varlet-ui/src/progress/props.ts b/packages/varlet-ui/src/progress/props.ts index 8d651ce7992..45057a079e5 100644 --- a/packages/varlet-ui/src/progress/props.ts +++ b/packages/varlet-ui/src/progress/props.ts @@ -21,6 +21,7 @@ export const props = { // progress 轨道颜色 trackColor: { type: String, + default: '#d8d8d8', }, // 是否添加水波纹效果 ripple: {