From 2a8be2d822ff137f1dd49661f76f63c4ecd68256 Mon Sep 17 00:00:00 2001 From: BeADre Date: Sun, 4 Apr 2021 02:29:21 +0800 Subject: [PATCH] feat: add less variables of step, collapse and define cubic func --- packages/varlet-ui/src/back-top/backTop.less | 4 +- packages/varlet-ui/src/badge/Badge.vue | 2 +- packages/varlet-ui/src/badge/badge.less | 2 +- packages/varlet-ui/src/button/button.less | 2 +- packages/varlet-ui/src/cell/docs/en-US.md | 4 +- packages/varlet-ui/src/cell/docs/zh-CN.md | 4 +- packages/varlet-ui/src/chip/docs/en-US.md | 4 +- packages/varlet-ui/src/chip/docs/zh-CN.md | 4 +- .../src/collapse-item/collapseItem.less | 25 +++-- packages/varlet-ui/src/collapse/collapse.less | 5 - packages/varlet-ui/src/collapse/collapse.vue | 6 +- packages/varlet-ui/src/collapse/docs/en-US.md | 17 +++- packages/varlet-ui/src/collapse/docs/zh-CN.md | 17 +++- .../src/date-picker/date-picker.less | 14 +-- .../src/form-details/formDetails.less | 2 +- .../varlet-ui/src/index-bar/docs/en-US.md | 9 +- .../varlet-ui/src/index-bar/docs/zh-CN.md | 9 +- .../varlet-ui/src/index-bar/indexBar.less | 2 +- packages/varlet-ui/src/input/docs/en-US.md | 2 +- packages/varlet-ui/src/input/docs/zh-CN.md | 2 +- packages/varlet-ui/src/input/input.less | 4 +- packages/varlet-ui/src/progress/docs/en-US.md | 4 +- packages/varlet-ui/src/progress/docs/zh-CN.md | 4 +- .../varlet-ui/src/pull-refresh/docs/en-US.md | 4 +- .../varlet-ui/src/pull-refresh/docs/zh-CN.md | 4 +- packages/varlet-ui/src/select/select.less | 4 +- packages/varlet-ui/src/slider/docs/en-US.md | 12 +-- packages/varlet-ui/src/slider/docs/zh-CN.md | 12 +-- packages/varlet-ui/src/slider/slider.less | 4 +- packages/varlet-ui/src/step/step.less | 99 +++++++++++-------- packages/varlet-ui/src/steps/docs/en-US.md | 24 ++++- packages/varlet-ui/src/steps/docs/zh-CN.md | 24 ++++- packages/varlet-ui/src/styles/var.less | 3 + packages/varlet-ui/src/switch/docs/en-US.md | 10 +- packages/varlet-ui/src/switch/docs/zh-CN.md | 10 +- packages/varlet-ui/src/switch/switch.less | 2 +- packages/varlet-ui/src/tab-item/tabItem.less | 4 +- .../varlet-ui/src/time-picker/timePicker.less | 4 +- 38 files changed, 231 insertions(+), 137 deletions(-) delete mode 100644 packages/varlet-ui/src/collapse/collapse.less diff --git a/packages/varlet-ui/src/back-top/backTop.less b/packages/varlet-ui/src/back-top/backTop.less index 82c544ea52e..4cd10f9660a 100644 --- a/packages/varlet-ui/src/back-top/backTop.less +++ b/packages/varlet-ui/src/back-top/backTop.less @@ -1,3 +1,5 @@ +@import '../styles/var'; + @back-top-right: 40px; @back-top-bottom: 40px; @back-top-button-size: 40px; @@ -7,7 +9,7 @@ right: @back-top-right; bottom: @back-top-bottom; transform: scale(0); - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; &__button { width: @back-top-button-size; diff --git a/packages/varlet-ui/src/badge/Badge.vue b/packages/varlet-ui/src/badge/Badge.vue index 72ee2696074..ef89bfb3059 100644 --- a/packages/varlet-ui/src/badge/Badge.vue +++ b/packages/varlet-ui/src/badge/Badge.vue @@ -12,7 +12,7 @@ {{ values }} - + diff --git a/packages/varlet-ui/src/badge/badge.less b/packages/varlet-ui/src/badge/badge.less index fddcd73d971..bfd73b6a2cc 100644 --- a/packages/varlet-ui/src/badge/badge.less +++ b/packages/varlet-ui/src/badge/badge.less @@ -96,7 +96,7 @@ &-fade-enter-active, &-fade-leave-active { - transition: opacity 0.15s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: opacity 0.15s @cubic-bezier; } &-fade-enter-from, diff --git a/packages/varlet-ui/src/button/button.less b/packages/varlet-ui/src/button/button.less index 1342a8d0bbb..356c38724cd 100644 --- a/packages/varlet-ui/src/button/button.less +++ b/packages/varlet-ui/src/button/button.less @@ -31,7 +31,7 @@ border-radius: @button-border-radius; user-select: none; will-change: box-shadow; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; cursor: pointer; font-family: inherit; diff --git a/packages/varlet-ui/src/cell/docs/en-US.md b/packages/varlet-ui/src/cell/docs/en-US.md index ff7183577f8..c6e681af8fb 100644 --- a/packages/varlet-ui/src/cell/docs/en-US.md +++ b/packages/varlet-ui/src/cell/docs/en-US.md @@ -66,8 +66,8 @@ createApp().use(Cell) | Variable | Default | | --- | --- | -| `@cell-font-size` | `14px` | -| `@cell-desc-font-size` | `12px` | +| `@cell-font-size` | `@font-size-md` | +| `@cell-desc-font-size` | `@font-size-sm` | | `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` | | `@cell-padding` | `10px 12px` | | `@cell-min-height` | `40px` | diff --git a/packages/varlet-ui/src/cell/docs/zh-CN.md b/packages/varlet-ui/src/cell/docs/zh-CN.md index c9429ffdb4f..fa326321960 100644 --- a/packages/varlet-ui/src/cell/docs/zh-CN.md +++ b/packages/varlet-ui/src/cell/docs/zh-CN.md @@ -66,8 +66,8 @@ createApp().use(Cell) | 变量名 | 默认值 | | --- | --- | -| `@cell-font-size` | `14px` | -| `@cell-desc-font-size` | `12px` | +| `@cell-font-size` | `@font-size-md` | +| `@cell-desc-font-size` | `@font-size-sm` | | `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` | | `@cell-padding` | `10px 12px` | | `@cell-min-height` | `40px` | diff --git a/packages/varlet-ui/src/chip/docs/en-US.md b/packages/varlet-ui/src/chip/docs/en-US.md index 104b2e85d71..f1e6a76ddf5 100644 --- a/packages/varlet-ui/src/chip/docs/en-US.md +++ b/packages/varlet-ui/src/chip/docs/en-US.md @@ -174,8 +174,8 @@ Custom label side slots | `@chip-mini-height` | `16px` | | `@chip-small-height` | `24px` | | `@chip-normal-height` | `32px` | -| `@chip-large-height:` | `40px` | -| `@chip-round-radius:` | `100px` | +| `@chip-large-height` | `40px` | +| `@chip-round-radius` | `100px` | | `@chip-mini-padding` | `0 4px` | | `@chip-small-padding` | `0 6px` | | `@chip-normal-padding` | `0 10px` | diff --git a/packages/varlet-ui/src/chip/docs/zh-CN.md b/packages/varlet-ui/src/chip/docs/zh-CN.md index def4650580e..f1a89a8c268 100644 --- a/packages/varlet-ui/src/chip/docs/zh-CN.md +++ b/packages/varlet-ui/src/chip/docs/zh-CN.md @@ -174,8 +174,8 @@ export default { | `@chip-mini-height` | `16px` | | `@chip-small-height` | `24px` | | `@chip-normal-height` | `32px` | -| `@chip-large-height:` | `40px` | -| `@chip-round-radius:` | `100px` | +| `@chip-large-height` | `40px` | +| `@chip-round-radius` | `100px` | | `@chip-mini-padding` | `0 4px` | | `@chip-small-padding` | `0 6px` | | `@chip-normal-padding` | `0 10px` | diff --git a/packages/varlet-ui/src/collapse-item/collapseItem.less b/packages/varlet-ui/src/collapse-item/collapseItem.less index 34a6364d0fc..875fe3de65f 100644 --- a/packages/varlet-ui/src/collapse-item/collapseItem.less +++ b/packages/varlet-ui/src/collapse-item/collapseItem.less @@ -1,11 +1,20 @@ @import '../styles/var'; +@collapse-background: #fff; +@collapse-color: #232222; +@collapse-header-font-size: @font-size-lg; +@collapse-header-padding: 10px 16px; +@collapse-content-font-size: @font-size-md; +@collapse-content-padding: 0 16px 10px; +@collapse-item-margin-top: 16px; +@collapse-disable-color: #bdbdbd; + .var-collapse-item { box-sizing: border-box; position: relative; margin-top: 0; - background: #fff; - color: rgba(0, 0, 0, 0.87); + background: @collapse-background; + color: @collapse-color; transition: margin-top 0.25s, color 0.25s; &:before { @@ -31,9 +40,9 @@ &-header { align-items: center; display: flex; - font-size: @font-size-md; + font-size: @collapse-header-font-size; outline: none; - padding: 10px 16px; + padding: @collapse-header-padding; justify-content: space-between; position: relative; width: 100%; @@ -55,21 +64,23 @@ &-content { transition: height 0.25s; display: flex; + font-size: @collapse-content-font-size; overflow: hidden; } &__wrap { - padding: 0 16px 10px; + padding: @collapse-content-padding; word-break: break-all; flex: 1; } &__active + &, &__active:not(:first-child) { - margin-top: 16px; + margin-top: @collapse-item-margin-top; } &__disable { - color: rgba(0, 0, 0, 0.38); + color: @collapse-disable-color; + cursor: not-allowed; } } diff --git a/packages/varlet-ui/src/collapse/collapse.less b/packages/varlet-ui/src/collapse/collapse.less deleted file mode 100644 index 1133f0dfdcb..00000000000 --- a/packages/varlet-ui/src/collapse/collapse.less +++ /dev/null @@ -1,5 +0,0 @@ -@import '../styles/elevation'; - -.var-collapse { - position: relative; -} diff --git a/packages/varlet-ui/src/collapse/collapse.vue b/packages/varlet-ui/src/collapse/collapse.vue index 3efcc244260..170f2d4c26a 100644 --- a/packages/varlet-ui/src/collapse/collapse.vue +++ b/packages/varlet-ui/src/collapse/collapse.vue @@ -111,5 +111,9 @@ export default defineComponent({ diff --git a/packages/varlet-ui/src/collapse/docs/en-US.md b/packages/varlet-ui/src/collapse/docs/en-US.md index 8a685006a60..881b28249cd 100644 --- a/packages/varlet-ui/src/collapse/docs/en-US.md +++ b/packages/varlet-ui/src/collapse/docs/en-US.md @@ -9,8 +9,7 @@ A content area which can be collapsed and expanded. ```js import { Collapse, CollapseItem } from '@varlet/ui' -createApp().use(Collapse) -createApp().use(CollapseItem) +createApp().use(Collapse).use(CollapseItem) ``` ### Basic Usage @@ -155,3 +154,17 @@ export default { | `default` | Content | - | | `title` | Title | - | | `icon` | Custom right icon | - | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@collapse-background` | `#fff` | +| `@collapse-color` | `#232222` | +| `@collapse-header-font-size` | `@font-size-lg` | +| `@collapse-header-padding` | `10px 16px` | +| `@collapse-content-font-size` | `@font-size-md` | +| `@collapse-content-font-size` | `14px` | +| `@collapse-item-margin-top` | `16px` | +| `@collapse-disable-color` | `#bdbdbd` | diff --git a/packages/varlet-ui/src/collapse/docs/zh-CN.md b/packages/varlet-ui/src/collapse/docs/zh-CN.md index 05d2abc53c2..d2e50a132bd 100644 --- a/packages/varlet-ui/src/collapse/docs/zh-CN.md +++ b/packages/varlet-ui/src/collapse/docs/zh-CN.md @@ -9,8 +9,7 @@ ```js import { Collapse, CollapseItem } from '@varlet/ui' -createApp().use(Collapse) -createApp().use(CollapseItem) +createApp().use(Collapse).use(CollapseItem) ``` ### 基本使用 @@ -155,3 +154,17 @@ export default { | `default` | 面板的内容 | - | | `title` | 面板的标题 | - | | `icon` | 自定义右侧icon | - | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@collapse-background` | `#fff` | +| `@collapse-color` | `#232222` | +| `@collapse-header-font-size` | `@font-size-lg` | +| `@collapse-header-padding` | `10px 16px` | +| `@collapse-content-font-size` | `@font-size-md` | +| `@collapse-content-font-size` | `14px` | +| `@collapse-item-margin-top` | `16px` | +| `@collapse-disable-color` | `#bdbdbd` | diff --git a/packages/varlet-ui/src/date-picker/date-picker.less b/packages/varlet-ui/src/date-picker/date-picker.less index 3f04f93abfb..1b4bb326fa9 100644 --- a/packages/varlet-ui/src/date-picker/date-picker.less +++ b/packages/varlet-ui/src/date-picker/date-picker.less @@ -35,7 +35,7 @@ font-size: 14px; font-weight: 500; margin-bottom: 8px; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; &--active { opacity: 1; @@ -53,7 +53,7 @@ display: flex; align-items: center; opacity: 0.6; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; &--active { opacity: 1; @@ -188,13 +188,13 @@ &-translatey-enter-active, &-reverse-translatey-enter-active { - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; } &-translatey-leave-active, &-reverse-translatey-leave-active { position: absolute; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; } &-translatey-leave-to { @@ -214,7 +214,7 @@ &-panel-fade-enter-from, &-panel-fade-leave-to { - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; opacity: 0; } @@ -234,13 +234,13 @@ &-translatex-enter-active, &-reverse-translatex-enter-active { - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; } &-translatex-leave-active, &-reverse-translatex-leave-active { position: absolute; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; } &-translatex-leave-to { diff --git a/packages/varlet-ui/src/form-details/formDetails.less b/packages/varlet-ui/src/form-details/formDetails.less index 7f39f0f9907..6ca49cf0ee0 100644 --- a/packages/varlet-ui/src/form-details/formDetails.less +++ b/packages/varlet-ui/src/form-details/formDetails.less @@ -16,7 +16,7 @@ &-form-details-enter-active, &-form-details-leave-active { - transition: 0.2s all cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.2s all @cubic-bezier; } } diff --git a/packages/varlet-ui/src/index-bar/docs/en-US.md b/packages/varlet-ui/src/index-bar/docs/en-US.md index f07937bfd80..6c28dd1d2b8 100644 --- a/packages/varlet-ui/src/index-bar/docs/en-US.md +++ b/packages/varlet-ui/src/index-bar/docs/en-US.md @@ -9,8 +9,7 @@ Hyperlinks to scroll on one page. ```js import { IndexBar, IndexAnchor } from '@varlet/ui' -createApp().use(IndexBar) -createApp().use(IndexAnchor) +createApp().use(IndexBar).use(IndexAnchor) ``` ### Basic Usage @@ -106,8 +105,8 @@ Use ref to get IndexBar instance and call instance methods. | Variable | Default | | --- | --- | -| `@index-bar-list-item-font-size` | `10px` | -| `@index-bar-list-item-color` | `#2979ff` | -| `@index-bar-list-item-active-color` | `#ee0a24` | +| `@index-bar-list-item-font-size` | `@font-size-xs` | +| `@index-bar-list-item-color` | `@color-primary` | +| `@index-bar-list-item-active-color` | `@color-danger` | | `@index-bar-list-item-height` | `14px` | | `@index-bar-list-item-padding` | `0 10px` | diff --git a/packages/varlet-ui/src/index-bar/docs/zh-CN.md b/packages/varlet-ui/src/index-bar/docs/zh-CN.md index 75bf4240c69..dd060c118d5 100644 --- a/packages/varlet-ui/src/index-bar/docs/zh-CN.md +++ b/packages/varlet-ui/src/index-bar/docs/zh-CN.md @@ -9,8 +9,7 @@ ```js import { IndexBar, IndexAnchor } from '@varlet/ui' -createApp().use(IndexBar) -createApp().use(IndexAnchor) +createApp().use(IndexBar).use(IndexAnchor) ``` ### 基本使用 @@ -106,8 +105,8 @@ createApp().use(IndexAnchor) | 变量名 | 默认值 | | --- | --- | -| `@index-bar-list-item-font-size` | `10px` | -| `@index-bar-list-item-color` | `#2979ff` | -| `@index-bar-list-item-active-color` | `#ee0a24` | +| `@index-bar-list-item-font-size` | `@font-size-xs` | +| `@index-bar-list-item-color` | `@color-primary` | +| `@index-bar-list-item-active-color` | `@color-danger` | | `@index-bar-list-item-height` | `14px` | | `@index-bar-list-item-padding` | `0 10px` | diff --git a/packages/varlet-ui/src/index-bar/indexBar.less b/packages/varlet-ui/src/index-bar/indexBar.less index a9f7c52a568..2168521e3d5 100644 --- a/packages/varlet-ui/src/index-bar/indexBar.less +++ b/packages/varlet-ui/src/index-bar/indexBar.less @@ -2,7 +2,7 @@ @index-bar-list-item-font-size: @font-size-xs; @index-bar-list-item-color: @color-primary; -@index-bar-list-item-active-color: #ee0a24; +@index-bar-list-item-active-color: @color-danger; @index-bar-list-item-height: 14px; @index-bar-list-item-padding: 0 10px; diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md index e15450d5657..d2ef69dc5d8 100644 --- a/packages/varlet-ui/src/input/docs/en-US.md +++ b/packages/varlet-ui/src/input/docs/en-US.md @@ -170,7 +170,7 @@ Other values are converted to text as a user prompt。 | `@input-error-color` | `@color-danger` | | `@input-blur-color` | `#888` | | `@input-focus-color` | `@color-primary` | -| `@input-placeholder-size:` | `6px` | +| `@input-placeholder-size` | `6px` | | `@input-placeholder-offset-top` | `4px` | | `@input-textarea-height` | `auto` | | `@input-textarea-padding-top` | `8px` | diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md index 9b5b0d13997..d1afb0e41cc 100644 --- a/packages/varlet-ui/src/input/docs/zh-CN.md +++ b/packages/varlet-ui/src/input/docs/zh-CN.md @@ -169,7 +169,7 @@ createApp().use(Icon) | `@input-error-color` | `@color-danger` | | `@input-blur-color` | `#888` | | `@input-focus-color` | `@color-primary` | -| `@input-placeholder-size:` | `6px` | +| `@input-placeholder-size` | `6px` | | `@input-placeholder-offset-top` | `4px` | | `@input-textarea-height` | `auto` | | `@input-textarea-padding-top` | `8px` | diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less index 544f20037d1..746f19ce68b 100644 --- a/packages/varlet-ui/src/input/input.less +++ b/packages/varlet-ui/src/input/input.less @@ -24,7 +24,7 @@ &-input-footer-margin-enter-active, &-input-footer-margin-leave-active { - transition: 0.2s all cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.2s all @cubic-bezier; } } @@ -87,7 +87,7 @@ background: @input-focus-color; transform: scaleX(0); transform-origin: center; - transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: transform 0.3s @cubic-bezier; } &__clear-icon { diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md index 02208a86e13..8c76928afe7 100644 --- a/packages/varlet-ui/src/progress/docs/en-US.md +++ b/packages/varlet-ui/src/progress/docs/en-US.md @@ -209,6 +209,6 @@ Use `show-track` to hide Progress-Track. | Variable | Default | | --- | --- | -| `@progress-font-size` | `12px` | +| `@progress-font-size` | `@font-size-sm` | | `@progress-ripple-color` | `#fff` | -| `@progress-background` | `#2979ff` | \ No newline at end of file +| `@progress-background` | `@color-primary` | \ No newline at end of file diff --git a/packages/varlet-ui/src/progress/docs/zh-CN.md b/packages/varlet-ui/src/progress/docs/zh-CN.md index d7118aa1335..8aff68f0149 100644 --- a/packages/varlet-ui/src/progress/docs/zh-CN.md +++ b/packages/varlet-ui/src/progress/docs/zh-CN.md @@ -209,6 +209,6 @@ createApp().use(Progress) | 变量名 | 默认值 | | --- | --- | -| `@progress-font-size` | `12px` | +| `@progress-font-size` | `@font-size-sm` | | `@progress-ripple-color` | `#fff` | -| `@progress-background` | `#2979ff` | \ No newline at end of file +| `@progress-background` | `@color-primary` | \ No newline at end of file diff --git a/packages/varlet-ui/src/pull-refresh/docs/en-US.md b/packages/varlet-ui/src/pull-refresh/docs/en-US.md index 1301b14a111..bb9bc616afa 100644 --- a/packages/varlet-ui/src/pull-refresh/docs/en-US.md +++ b/packages/varlet-ui/src/pull-refresh/docs/en-US.md @@ -90,6 +90,6 @@ export default { | --- | --- | | `@pull-refresh-size` | `40px` | | `@pull-refresh-background` | `#fff` | -| `@pull-refresh-color` | `#2979ff` | -| `@pull-refresh-success-color` | `#4caf50` | +| `@pull-refresh-color` | `@color-primary` | +| `@pull-refresh-success-color` | `@color-success` | | `@pull-refresh-icon-size` | `25px` | diff --git a/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md b/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md index fc1e85a00e4..936d9ec910d 100644 --- a/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md +++ b/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md @@ -88,6 +88,6 @@ export default { | --- | --- | | `@pull-refresh-size` | `40px` | | `@pull-refresh-background` | `#fff` | -| `@pull-refresh-color` | `#2979ff` | -| `@pull-refresh-success-color` | `#4caf50` | +| `@pull-refresh-color` | `@color-primary` | +| `@pull-refresh-success-color` | `@color-success` | | `@pull-refresh-icon-size` | `25px` | diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less index 0d47140f263..6c28d00aaad 100644 --- a/packages/varlet-ui/src/select/select.less +++ b/packages/varlet-ui/src/select/select.less @@ -28,7 +28,7 @@ &-select-footer-margin-enter-active, &-select-footer-margin-leave-active { - transition: 0.2s all cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.2s all @cubic-bezier; } } @@ -113,7 +113,7 @@ background: @select-focus-color; transform: scaleX(0); transform-origin: center; - transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: transform 0.3s @cubic-bezier; } &--placeholder-hint { diff --git a/packages/varlet-ui/src/slider/docs/en-US.md b/packages/varlet-ui/src/slider/docs/en-US.md index dc9d0557777..f76e74f4a11 100644 --- a/packages/varlet-ui/src/slider/docs/en-US.md +++ b/packages/varlet-ui/src/slider/docs/en-US.md @@ -148,10 +148,10 @@ Use `rules` to validate the value | Variable | Default | | --- | --- | -| `@slider-error-color` | `#f44336` | +| `@slider-error-color` | `@color-danger` | | `@slider-track-background` | `#bdbdbd` | -| `@slider-track-fill-background` | `#2979ff` | -| `@slider-thumb-block-background` | `#2979ff` | -| `@slider-thumb-ripple-background` | `#2979ff` | -| `@slider-thumb-label-background` | `#2979ff` | -| `@slider-thumb-label-font-size` | `12px` | \ No newline at end of file +| `@slider-track-fill-background` | `@color-primary` | +| `@slider-thumb-block-background` | `@color-primary` | +| `@slider-thumb-ripple-background` | `@color-primary` | +| `@slider-thumb-label-background` | `@color-primary` | +| `@slider-thumb-label-font-size` | `@font-size-sm` | \ No newline at end of file diff --git a/packages/varlet-ui/src/slider/docs/zh-CN.md b/packages/varlet-ui/src/slider/docs/zh-CN.md index 90adada54eb..33290fb04ab 100644 --- a/packages/varlet-ui/src/slider/docs/zh-CN.md +++ b/packages/varlet-ui/src/slider/docs/zh-CN.md @@ -145,10 +145,10 @@ export default { | 变量名 | 默认值 | | --- | --- | -| `@slider-error-color` | `#f44336` | +| `@slider-error-color` | `@color-danger` | | `@slider-track-background` | `#bdbdbd` | -| `@slider-track-fill-background` | `#2979ff` | -| `@slider-thumb-block-background` | `#2979ff` | -| `@slider-thumb-ripple-background` | `#2979ff` | -| `@slider-thumb-label-background` | `#2979ff` | -| `@slider-thumb-label-font-size` | `12px` | +| `@slider-track-fill-background` | `@color-primary` | +| `@slider-thumb-block-background` | `@color-primary` | +| `@slider-thumb-ripple-background` | `@color-primary` | +| `@slider-thumb-label-background` | `@color-primary` | +| `@slider-thumb-label-font-size` | `@font-size-sm` | diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less index 410cfdd8010..c931794b727 100644 --- a/packages/varlet-ui/src/slider/slider.less +++ b/packages/varlet-ui/src/slider/slider.less @@ -61,7 +61,7 @@ border-radius: 50%; opacity: 0.3; background: @slider-thumb-ripple-background; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; &-active { width: 36px; @@ -83,7 +83,7 @@ user-select: none; position: absolute; left: 45%; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: 0.3s @cubic-bezier; font-size: @slider-thumb-label-font-size; overflow: hidden; transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0); diff --git a/packages/varlet-ui/src/step/step.less b/packages/varlet-ui/src/step/step.less index 767a6e329e0..89bf6ff509f 100644 --- a/packages/varlet-ui/src/step/step.less +++ b/packages/varlet-ui/src/step/step.less @@ -1,5 +1,44 @@ @import '../styles/var'; +@step-tag-size: 20px; +@step-tag-background: #9e9e9e; +@step-tag-font-size: @font-size-md; +@step-tag-color: #fff; +@step-tag-active-color: @color-primary; +@step-tag-margin: 4px 0; +@step-tag-icon-size: @font-size-lg; +@step-content-font-size: @font-size-md; +@step-content-color: rgba(0, 0, 0, 0.38); +@step-content-active-color: #000; +@step-line-background: #000; +@step-vertical-min-height: 30px; +@step-vertical-tag-margin: 0 4px; +@step-vertical-line-height: calc(100% - 30px); +@step-vertical-line-min-height: 20px; + +// Mixins +.tag { + width: @step-tag-size; + height: @step-tag-size; + background: @step-tag-background; + display: flex; + font-size: @step-tag-font-size; + align-items: center; + justify-content: center; + border-radius: 50%; + color: @step-tag-color; + cursor: pointer; + transition: 0.3s @cubic-bezier; +} + +// Mixins +.content { + font-size: @step-content-font-size; + color: @step-content-color; + cursor: pointer; + transition: 0.3s @cubic-bezier; +} + .var-step { display: flex; position: relative; @@ -17,47 +56,33 @@ } &__tag { - width: 20px; - height: 20px; - background: #9e9e9e; - display: flex; - font-size: 14px; - align-items: center; - justify-content: center; - border-radius: 50%; - color: white; - cursor: pointer; - margin: 4px 0; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + margin: @step-tag-margin; + .tag(); &--active { - background: @color-primary; + background: @step-tag-active-color; } .var-icon { - font-size: 16px; + font-size: @step-tag-icon-size; } } &__content { - font-size: 14px; - color: rgba(0, 0, 0, 0.38); - cursor: pointer; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + .content(); &--active { - color: #000; + color: @step-content-active-color; } } &__line { position: relative; - width: 20px; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); - background: black; + background: @step-line-background; } } @@ -67,51 +92,39 @@ &__main { display: flex; align-items: flex-start; - min-height: 30px; + min-height: @step-vertical-min-height; } &__tag { - width: 20px; - height: 20px; - background: #9e9e9e; - display: flex; - font-size: 14px; - align-items: center; - justify-content: center; - border-radius: 50%; - color: white; - cursor: pointer; - margin: 0 4px; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + margin: @step-vertical-tag-margin; + .tag(); &--active { - background: @color-primary; + background: @step-tag-active-color; } .var-icon { - font-size: 16px; + font-size: @step-tag-icon-size; } } &__content { - font-size: 14px; - color: rgba(0, 0, 0, 0.38); - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + .content(); &--active { - color: #000; + color: @step-content-active-color; } } &__line { position: relative; - height: calc(100% - 30px); + height: @step-vertical-line-height; left: 14px; top: calc(-100% + 45px); - min-height: 20px; + min-height: @step-vertical-line-min-height; width: 1px; transform: scaleX(0.5); - background: black; + background: @step-line-background; } } } diff --git a/packages/varlet-ui/src/steps/docs/en-US.md b/packages/varlet-ui/src/steps/docs/en-US.md index dd2ab3bb97b..88bda1f1980 100644 --- a/packages/varlet-ui/src/steps/docs/en-US.md +++ b/packages/varlet-ui/src/steps/docs/en-US.md @@ -9,8 +9,7 @@ Steps is a navigation bar that guides users through the steps of a task. ```js import { Steps, Step } from '@varlet/ui' -createApp().use(Steps) -createApp().use(Step) +createApp().use(Steps).use(Step) ``` ### Basic Usage @@ -195,3 +194,24 @@ Use `direction` prop to change mode of steps. | Name | Description | SlotProps | | ----- | -------------- | -------- | | `default` | Content of step | - | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@step-tag-size` | `20px` | +| `@step-tag-background` | `#9e9e9e` | +| `@step-tag-font-size` | `@font-size-md` | +| `@step-tag-color` | `#fff` | +| `@step-tag-active-color` | `@color-primary` | +| `@step-tag-margin` | `4px 0` | +| `@step-tag-icon-size` | `@font-size-lg` | +| `@step-content-font-size` | `@font-size-md` | +| `@step-content-color` | `rgba(0, 0, 0, 0.38)` | +| `@step-content-active-color` | `#000` | +| `@step-line-background` | `#000` | +| `@step-vertical-min-height` | `30px` | +| `@step-vertical-tag-margin` | `0 4px` | +| `@step-vertical-line-height` | `calc(100% - 30px)` | +| `@step-vertical-line-min-height` | `20px` | diff --git a/packages/varlet-ui/src/steps/docs/zh-CN.md b/packages/varlet-ui/src/steps/docs/zh-CN.md index bc52ad5c45c..fb30d6db7af 100644 --- a/packages/varlet-ui/src/steps/docs/zh-CN.md +++ b/packages/varlet-ui/src/steps/docs/zh-CN.md @@ -9,8 +9,7 @@ ```js import { Steps, Step } from '@varlet/ui' -createApp().use(Steps) -createApp().use(Step) +createApp().use(Steps).use(Step) ``` ### 基本使用 @@ -195,3 +194,24 @@ export default { | 名称 | 说明 | 参数 | | ----- | -------------- | -------- | | `default` | step的内容 | - | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@step-tag-size` | `20px` | +| `@step-tag-background` | `#9e9e9e` | +| `@step-tag-font-size` | `@font-size-md` | +| `@step-tag-color` | `#fff` | +| `@step-tag-active-color` | `@color-primary` | +| `@step-tag-margin` | `4px 0` | +| `@step-tag-icon-size` | `@font-size-lg` | +| `@step-content-font-size` | `@font-size-md` | +| `@step-content-color` | `rgba(0, 0, 0, 0.38)` | +| `@step-content-active-color` | `#000` | +| `@step-line-background` | `#000` | +| `@step-vertical-min-height` | `30px` | +| `@step-vertical-tag-margin` | `0 4px` | +| `@step-vertical-line-height` | `calc(100% - 30px)` | +| `@step-vertical-line-min-height` | `20px` | diff --git a/packages/varlet-ui/src/styles/var.less b/packages/varlet-ui/src/styles/var.less index 9d45303c2a8..1296d233d14 100644 --- a/packages/varlet-ui/src/styles/var.less +++ b/packages/varlet-ui/src/styles/var.less @@ -17,3 +17,6 @@ @color-warning: #ff9800; @color-danger: #f44336; @color-disabled: #e0e0e0; + +// 动画函数 +@cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); diff --git a/packages/varlet-ui/src/switch/docs/en-US.md b/packages/varlet-ui/src/switch/docs/en-US.md index ea27c137ab4..c32bfcd5f0c 100644 --- a/packages/varlet-ui/src/switch/docs/en-US.md +++ b/packages/varlet-ui/src/switch/docs/en-US.md @@ -103,10 +103,10 @@ Use `rules` to validate the value | Variable | Default | | --- | --- | | `@switch-track-background` | `#fff` | -| `@switch-track-active-background` | `#2979ff` | -| `@switch-track-error-background` | `#f44336` | -| `@switch-ripple-color` | `#2979ff` | +| `@switch-track-active-background` | `@color-primary` | +| `@switch-track-error-background` | `@color-danger` | +| `@switch-ripple-color` | `@color-primary` | | `@switch-handle-background` | `#fff` | | `@switch-handle-color` | `#fff` | -| `@switch-handle-active-background` | `#2979ff` | -| `@switch-handle-error-background` | `#f44336` | +| `@switch-handle-active-background` | `@color-primary` | +| `@switch-handle-error-background` | `@color-danger` | diff --git a/packages/varlet-ui/src/switch/docs/zh-CN.md b/packages/varlet-ui/src/switch/docs/zh-CN.md index 0aac7e1495b..46c1d31a603 100644 --- a/packages/varlet-ui/src/switch/docs/zh-CN.md +++ b/packages/varlet-ui/src/switch/docs/zh-CN.md @@ -103,11 +103,11 @@ export default { | 变量名 | 默认值 | | --- | --- | | `@switch-track-background` | `#fff` | -| `@switch-track-active-background` | `#2979ff` | -| `@switch-track-error-background` | `#f44336` | -| `@switch-ripple-color` | `#2979ff` | +| `@switch-track-active-background` | `@color-primary` | +| `@switch-track-error-background` | `@color-danger` | +| `@switch-ripple-color` | `@color-primary` | | `@switch-handle-background` | `#fff` | | `@switch-handle-color` | `#fff` | -| `@switch-handle-active-background` | `#2979ff` | -| `@switch-handle-error-background` | `#f44336` | +| `@switch-handle-active-background` | `@color-primary` | +| `@switch-handle-error-background` | `@color-danger` | diff --git a/packages/varlet-ui/src/switch/switch.less b/packages/varlet-ui/src/switch/switch.less index 93a1535a6d2..509773589b4 100644 --- a/packages/varlet-ui/src/switch/switch.less +++ b/packages/varlet-ui/src/switch/switch.less @@ -47,7 +47,7 @@ color: @switch-ripple-color; border-radius: 50%; overflow: hidden; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; } &__handle { diff --git a/packages/varlet-ui/src/tab-item/tabItem.less b/packages/varlet-ui/src/tab-item/tabItem.less index 19017aeb418..4b636413324 100644 --- a/packages/varlet-ui/src/tab-item/tabItem.less +++ b/packages/varlet-ui/src/tab-item/tabItem.less @@ -1,3 +1,5 @@ +@import '../styles/var'; + .var { &-tab-item-left-enter-from { transform: translateX(-100%); @@ -20,7 +22,7 @@ position: absolute; top: 0; width: 100%; - transition: transform .3s cubic-bezier(.25, .8, .5, 1); + transition: transform 0.3s @cubic-bezier; } } diff --git a/packages/varlet-ui/src/time-picker/timePicker.less b/packages/varlet-ui/src/time-picker/timePicker.less index 1839944c262..a518278d9a1 100644 --- a/packages/varlet-ui/src/time-picker/timePicker.less +++ b/packages/varlet-ui/src/time-picker/timePicker.less @@ -38,7 +38,7 @@ &__btn { opacity: 0.6; cursor: pointer; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; white-space: nowrap; &--active { @@ -146,7 +146,7 @@ &-panel-fade-enter-from, &-panel-fade-leave-to { - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + transition: 0.3s @cubic-bezier; opacity: 0; }