Skip to content

Commit

Permalink
feat(progress): progress uses n as CSS vars prefix (#1930)
Browse files Browse the repository at this point in the history
  • Loading branch information
@XieZongChen
XieZongChen authored Dec 21, 2021
1 parent ba93e0b commit 4b0a5a9
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 67 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Pending

### Feats

- `n-progress` uses `n` as CSS vars prefix.

### Fixes

- Fix `n-form-item-gi` 's `validate` doesn't work, closes [#1901](https://github.com/TuSimple/naive-ui/issues/1901).
Expand Down
4 changes: 4 additions & 0 deletions CHANGELOG.zh-CN.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Pending

### Feats

- `n-progress` 的 CSS 变量使用 `n` 作为前缀

### Fixes

- 修复 `n-form-item-gi` 的 `validate` 不生效，关闭 [#1901](https://github.com/TuSimple/naive-ui/issues/1901)
Expand Down
28 changes: 14 additions & 14 deletions src/progress/src/Progress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,20 +103,20 @@ export default defineComponent({
}
} = themeRef.value
return {
'--bezier': cubicBezierEaseInOut,
'--fill-color': fillColor,
'--font-size': fontSize,
'--font-size-circle': fontSizeCircle,
'--font-weight-circle': fontWeightCircle,
'--icon-color': iconColor,
'--icon-size-circle': iconSizeCircle,
'--icon-size-line': iconSizeLine,
'--line-bg-processing': lineBgProcessing,
'--rail-color': railColor,
'--rail-height': railHeight,
'--text-color-circle': textColorCircle,
'--text-color-line-inner': textColorLineInner,
'--text-color-line-outer': textColorLineOuter
'--n-bezier': cubicBezierEaseInOut,
'--n-fill-color': fillColor,
'--n-font-size': fontSize,
'--n-font-size-circle': fontSizeCircle,
'--n-font-weight-circle': fontWeightCircle,
'--n-icon-color': iconColor,
'--n-icon-size-circle': iconSizeCircle,
'--n-icon-size-line': iconSizeLine,
'--n-line-bg-processing': lineBgProcessing,
'--n-rail-color': railColor,
'--n-rail-height': railHeight,
'--n-text-color-circle': textColorCircle,
'--n-text-color-line-inner': textColorLineInner,
'--n-text-color-line-outer': textColorLineOuter
}
})
}
Expand Down
106 changes: 53 additions & 53 deletions src/progress/src/styles/index.cssr.ts
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
import { c, cB, cM } from '../../../_utils/cssr'

// vars
// --bezier
// --fill-color
// --font-size
// --font-size-circle
// --font-weight-circle
// --icon-color
// --icon-size-circle
// --icon-size-line
// --line-bg-processing
// --rail-color
// --rail-height
// --text-color-circle
// --text-color-line-inner
// --text-color-line-outer
// --n-bezier
// --n-fill-color
// --n-font-size
// --n-font-size-circle
// --n-font-weight-circle
// --n-icon-color
// --n-icon-size-circle
// --n-icon-size-line
// --n-line-bg-processing
// --n-rail-color
// --n-rail-height
// --n-text-color-circle
// --n-text-color-line-inner
// --n-text-color-line-outer
export default c([
cB('progress', {
display: 'inline-block'
}, [
cB('progress-icon', `
color: var(--icon-color);
transition: color .3s var(--bezier);
color: var(--n-icon-color);
transition: color .3s var(--n-bezier);
`),
cM('line', `
width: 100%;
Expand All @@ -41,17 +41,17 @@ export default c([
cB('progress-icon', `
width: 30px;
padding-left: 14px;
height: var(--icon-size-line);
line-height: var(--icon-size-line);
font-size: var(--icon-size-line);
height: var(--n-icon-size-line);
line-height: var(--n-icon-size-line);
font-size: var(--n-icon-size-line);
`, [
cM('as-text', `
color: var(--text-color-line-outer);
color: var(--n-text-color-line-outer);
text-align: center;
width: 40px;
font-size: var(--font-size);
font-size: var(--n-font-size);
padding-left: 4px;
transition: color .3s var(--bezier);
transition: color .3s var(--n-bezier);
`)
])
]),
Expand All @@ -75,10 +75,10 @@ export default c([
display: flex;
align-items: center;
color: inherit;
font-size: var(--font-size-circle);
color: var(--text-color-circle);
font-weight: var(--font-weight-circle);
transition: color .3s var(--bezier);
font-size: var(--n-font-size-circle);
color: var(--n-text-color-circle);
font-weight: var(--n-font-weight-circle);
transition: color .3s var(--n-bezier);
white-space: nowrap;
`),
cB('progress-icon', `
Expand All @@ -88,25 +88,25 @@ export default c([
transform: translateX(-50%) translateY(-50%);
display: flex;
align-items: center;
color: var(--icon-color);
font-size: var(--icon-size-circle);
color: var(--n-icon-color);
font-size: var(--n-icon-size-circle);
`)
]),
cM('multiple-circle', {
width: '200px',
color: 'inherit'
}, [
cB('progress-text', `
font-weight: var(--font-weight-circle);
color: var(--text-color-circle);
font-weight: var(--n-font-weight-circle);
color: var(--n-text-color-circle);
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
transition: color .3s var(--bezier);
transition: color .3s var(--n-bezier);
`)
]),
cB('progress-content', {
Expand All @@ -120,20 +120,20 @@ export default c([
verticalAlign: 'bottom'
}),
cB('progress-graph-circle-fill', `
stroke: var(--fill-color);
stroke: var(--n-fill-color);
transition:
opacity .3s var(--bezier),
stroke .3s var(--bezier),
stroke-dasharray .3s var(--bezier);
opacity .3s var(--n-bezier),
stroke .3s var(--n-bezier),
stroke-dasharray .3s var(--n-bezier);
`, [
cM('empty', {
opacity: 0
})
]),
cB('progress-graph-circle-rail', `
transition: stroke .3s var(--bezier);
transition: stroke .3s var(--n-bezier);
overflow: hidden;
stroke: var(--rail-color);
stroke: var(--n-rail-color);
`)
]),
cB('progress-graph-line', [
Expand All @@ -155,8 +155,8 @@ export default c([
height: inherit;
line-height: 16px;
font-size: 12px;
color: var(--text-color-line-inner);
transition: color .3s var(--bezier);
color: var(--n-text-color-line-inner);
transition: color .3s var(--n-bezier);
`)
])
]),
Expand All @@ -167,10 +167,10 @@ export default c([
`, [
cB('progress-graph-line-rail', {
flex: 1,
transition: 'background-color .3s var(--bezier)'
transition: 'background-color .3s var(--n-bezier)'
}),
cB('progress-graph-line-indicator', `
background: var(--fill-color);
background: var(--n-fill-color);
font-size: 12px;
transform: translateZ(0);
display: flex;
Expand All @@ -181,37 +181,37 @@ export default c([
border-radius: 10px;
position: absolute;
white-space: nowrap;
color: var(--text-color-line-inner);
color: var(--n-text-color-line-inner);
transition:
right .2s var(--bezier),
color .3s var(--bezier),
background-color .3s var(--bezier);
right .2s var(--n-bezier),
color .3s var(--n-bezier),
background-color .3s var(--n-bezier);
`)
]),
cB('progress-graph-line-rail', `
position: relative;
overflow: hidden;
height: var(--rail-height);
height: var(--n-rail-height);
border-radius: 5px;
background-color: var(--rail-color);
transition: background-color .3s var(--bezier);
background-color: var(--n-rail-color);
transition: background-color .3s var(--n-bezier);
`, [
cB('progress-graph-line-fill', `
background: var(--fill-color);
background: var(--n-fill-color);
position: relative;
border-radius: 5px;
height: inherit;
width: 100%;
max-width: 0%;
transition:
background-color .3s var(--bezier),
max-width .2s var(--bezier);
background-color .3s var(--n-bezier),
max-width .2s var(--n-bezier);
`, [
cM('processing', [
c('&::after', `
content: "";
background-image: var(--line-bg-processing);
animation: progress-processing-animation 2s var(--bezier) infinite;
background-image: var(--n-line-bg-processing);
animation: progress-processing-animation 2s var(--n-bezier) infinite;
`)
])
])
Expand Down

0 comments on commit 4b0a5a9

Please sign in to comment.