diff --git a/packages/varlet-ui/src/back-top/BackTop.vue b/packages/varlet-ui/src/back-top/BackTop.vue index bf8f60b8cf8..89c1fa11890 100644 --- a/packages/varlet-ui/src/back-top/BackTop.vue +++ b/packages/varlet-ui/src/back-top/BackTop.vue @@ -76,22 +76,5 @@ export default defineComponent({ diff --git a/packages/varlet-ui/src/back-top/backTop.less b/packages/varlet-ui/src/back-top/backTop.less new file mode 100644 index 00000000000..82c544ea52e --- /dev/null +++ b/packages/varlet-ui/src/back-top/backTop.less @@ -0,0 +1,20 @@ +@back-top-right: 40px; +@back-top-bottom: 40px; +@back-top-button-size: 40px; + +.var-back-top { + position: fixed; + right: @back-top-right; + bottom: @back-top-bottom; + transform: scale(0); + transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + + &__button { + width: @back-top-button-size; + height: @back-top-button-size; + } + + &--active { + transform: scale(1); + } +} diff --git a/packages/varlet-ui/src/back-top/docs/en-US.md b/packages/varlet-ui/src/back-top/docs/en-US.md index 96eca0aee89..7095c724e0f 100644 --- a/packages/varlet-ui/src/back-top/docs/en-US.md +++ b/packages/varlet-ui/src/back-top/docs/en-US.md @@ -53,3 +53,12 @@ export default { | Name | Description | SlotProps | | ----- | -------------- | -------- | | `default` | Custom the content | - | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@back-top-right` | `40px` | +| `@back-top-bottom` | `40px` | +| `@back-top-button-size` | `40px` | diff --git a/packages/varlet-ui/src/back-top/docs/zh-CN.md b/packages/varlet-ui/src/back-top/docs/zh-CN.md index dc1b6c257a2..d637078d1d2 100644 --- a/packages/varlet-ui/src/back-top/docs/zh-CN.md +++ b/packages/varlet-ui/src/back-top/docs/zh-CN.md @@ -53,3 +53,12 @@ export default { | 名称 | 说明 | 参数 | | ----- | -------------- | -------- | | `default` | 自定义按钮内容 | - | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@back-top-right` | `40px` | +| `@back-top-bottom` | `40px` | +| `@back-top-button-size` | `40px` | diff --git a/packages/varlet-ui/src/button/docs/en-US.md b/packages/varlet-ui/src/button/docs/en-US.md index 29cf3c14b82..447ea64f6ec 100644 --- a/packages/varlet-ui/src/button/docs/en-US.md +++ b/packages/varlet-ui/src/button/docs/en-US.md @@ -175,4 +175,4 @@ export default { | `@button-mini-height` | `20px` | | `@button-small-height` | `28px` | | `@button-normal-height` | `36px` | -| `@button-large-height:` | `44px` | \ No newline at end of file +| `@button-large-height` | `44px` | \ No newline at end of file diff --git a/packages/varlet-ui/src/button/docs/zh-CN.md b/packages/varlet-ui/src/button/docs/zh-CN.md index ca8473db0a4..63df5fec993 100644 --- a/packages/varlet-ui/src/button/docs/zh-CN.md +++ b/packages/varlet-ui/src/button/docs/zh-CN.md @@ -175,4 +175,4 @@ export default { | `@button-mini-height` | `20px` | | `@button-small-height` | `28px` | | `@button-normal-height` | `36px` | -| `@button-large-height:` | `44px` | \ No newline at end of file +| `@button-large-height` | `44px` | \ No newline at end of file diff --git a/packages/varlet-ui/src/cell/cell.less b/packages/varlet-ui/src/cell/cell.less index 4dbe55a1df9..85870ab1c02 100644 --- a/packages/varlet-ui/src/cell/cell.less +++ b/packages/varlet-ui/src/cell/cell.less @@ -1,31 +1,42 @@ @import '../styles/var'; @import '../styles/common'; +@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; +@cell-border-color: #bcc2cb; +@cell-border-left: 12px; +@cell-border-right: 12px; +@cell-icon-right: 8px; +@cell-extra-left: 8px; + .var-cell { align-items: center; display: flex; - min-height: 40px; + min-height: @cell-min-height; outline: none; - padding: 10px 12px; + padding: @cell-padding; position: relative; box-sizing: border-box; - font-size: @font-size-md; + font-size: @cell-font-size; &--border { &:after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; - right: 16px; + right: @cell-border-right; bottom: 0; - left: 16px; - border-bottom: 1px solid #bcc2cb; + left: @cell-border-left; + border-bottom: 1px solid @cell-border-color; transform: scaleY(0.5); } } &__icon { - margin-right: 8px; + margin-right: @cell-icon-right; flex: 0; } @@ -41,12 +52,12 @@ } &__desc { - font-size: @font-size-sm; - color: rgba(0, 0, 0, 0.6); + font-size: @cell-desc-font-size; + color: @cell-desc-color; } &__extra { flex: 0; - margin-left: 8px; + margin-left: @cell-extra-left; } } diff --git a/packages/varlet-ui/src/cell/docs/en-US.md b/packages/varlet-ui/src/cell/docs/en-US.md index 0fa1e774dd5..ff7183577f8 100644 --- a/packages/varlet-ui/src/cell/docs/en-US.md +++ b/packages/varlet-ui/src/cell/docs/en-US.md @@ -60,3 +60,19 @@ createApp().use(Cell) | `icon` | Icon of cell | - | | `desc` | Description of cell | - | | `extra` | Extra of cell | - | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@cell-font-size` | `14px` | +| `@cell-desc-font-size` | `12px` | +| `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` | +| `@cell-padding` | `10px 12px` | +| `@cell-min-height` | `40px` | +| `@cell-border-color` | `#bcc2cb` | +| `@cell-border-left` | `12px` | +| `@cell-border-right` | `12px` | +| `@cell-icon-right` | `8px` | +| `@cell-extra-left` | `8px` | diff --git a/packages/varlet-ui/src/cell/docs/zh-CN.md b/packages/varlet-ui/src/cell/docs/zh-CN.md index 3cdadc65bb4..c9429ffdb4f 100644 --- a/packages/varlet-ui/src/cell/docs/zh-CN.md +++ b/packages/varlet-ui/src/cell/docs/zh-CN.md @@ -60,3 +60,19 @@ createApp().use(Cell) | `icon` | 自定义左侧icon区域 | - | | `desc` | 描述的内容 | - | | `extra` | 自定义右侧区域内容 | - | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@cell-font-size` | `14px` | +| `@cell-desc-font-size` | `12px` | +| `@cell-desc-color` | `rgba(0, 0, 0, 0.6)` | +| `@cell-padding` | `10px 12px` | +| `@cell-min-height` | `40px` | +| `@cell-border-color` | `#bcc2cb` | +| `@cell-border-left` | `12px` | +| `@cell-border-right` | `12px` | +| `@cell-icon-right` | `8px` | +| `@cell-extra-left` | `8px` | 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 793ab9e5b8d..f07937bfd80 100644 --- a/packages/varlet-ui/src/index-bar/docs/en-US.md +++ b/packages/varlet-ui/src/index-bar/docs/en-US.md @@ -100,3 +100,14 @@ Use ref to get IndexBar instance and call instance methods. | Name | Description | arguments | | ---- | ------- | -------- | | `scrollTo` | scroll to target element | `index: number ｜ string` | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| 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-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 203b21167bb..75bf4240c69 100644 --- a/packages/varlet-ui/src/index-bar/docs/zh-CN.md +++ b/packages/varlet-ui/src/index-bar/docs/zh-CN.md @@ -100,3 +100,14 @@ createApp().use(IndexAnchor) | 方法名 | 说明 | 参数 | | ---- | ------- | -------- | | `scrollTo` | 滚动到指定锚点 | `index: number ｜ string` | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@index-bar-list-item-font-size` | `10px` | +| `@index-bar-list-item-color` | `#2979ff` | +| `@index-bar-list-item-active-color` | `#ee0a24` | +| `@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 9eac7a21a19..a9f7c52a568 100644 --- a/packages/varlet-ui/src/index-bar/indexBar.less +++ b/packages/varlet-ui/src/index-bar/indexBar.less @@ -1,5 +1,11 @@ @import '../styles/var'; +@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-height: 14px; +@index-bar-list-item-padding: 0 10px; + .var-index-bar { position: relative; height: 100%; @@ -12,20 +18,20 @@ list-style: none; padding: 0; margin: 0; - font-size: @font-size-xs; } &__anchor-item { + font-size: @index-bar-list-item-font-size; display: flex; align-items: center; - height: 14px; + height: @index-bar-list-item-height; justify-content: center; - padding: 0 10px; - color: @color-primary; + padding: @index-bar-list-item-padding; + color: @index-bar-list-item-color; cursor: pointer; &--active { - color: #ee0a24; + color: @index-bar-list-item-active-color; } } } diff --git a/packages/varlet-ui/src/list/List.vue b/packages/varlet-ui/src/list/List.vue index de729f48937..4292393b25c 100644 --- a/packages/varlet-ui/src/list/List.vue +++ b/packages/varlet-ui/src/list/List.vue @@ -51,9 +51,8 @@ export default defineComponent({ } const isReachBottom = () => { - const containerBottom = scroller === window - ? window.innerHeight - : (scroller as HTMLElement).getBoundingClientRect().bottom + const containerBottom = + scroller === window ? window.innerHeight : (scroller as HTMLElement).getBoundingClientRect().bottom const { bottom: detectorBottom } = (detectorEl.value as HTMLElement).getBoundingClientRect() @@ -78,8 +77,6 @@ export default defineComponent({ onMounted(() => { scroller = getParentScroller(listEl.value as HTMLElement) - console.log(scroller) - props.immediateCheck && check() scroller.addEventListener('scroll', check) diff --git a/packages/varlet-ui/src/progress/docs/en-US.md b/packages/varlet-ui/src/progress/docs/en-US.md index c26a6eacf45..02208a86e13 100644 --- a/packages/varlet-ui/src/progress/docs/en-US.md +++ b/packages/varlet-ui/src/progress/docs/en-US.md @@ -202,4 +202,13 @@ Use `show-track` to hide Progress-Track. | Name | Description | SlotProps | | ----- | -------------- | -------- | -| `default` | Custom action | - | \ No newline at end of file +| `default` | Custom action | - | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@progress-font-size` | `12px` | +| `@progress-ripple-color` | `#fff` | +| `@progress-background` | `#2979ff` | \ 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 b4c9c96881f..d7118aa1335 100644 --- a/packages/varlet-ui/src/progress/docs/zh-CN.md +++ b/packages/varlet-ui/src/progress/docs/zh-CN.md @@ -202,4 +202,13 @@ createApp().use(Progress) | 名称 | 说明 | 参数 | | ----- | -------------- | -------- | -| `default` | 自定义 action | - | \ No newline at end of file +| `default` | 自定义 action | - | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@progress-font-size` | `12px` | +| `@progress-ripple-color` | `#fff` | +| `@progress-background` | `#2979ff` | \ No newline at end of file diff --git a/packages/varlet-ui/src/progress/progress.less b/packages/varlet-ui/src/progress/progress.less index 88ce496a730..9eeb708ee98 100644 --- a/packages/varlet-ui/src/progress/progress.less +++ b/packages/varlet-ui/src/progress/progress.less @@ -1,86 +1,88 @@ @import '../styles/var'; -@ripple-color: #ffffff; +@progress-font-size: @font-size-sm; +@progress-ripple-color: #fff; +@progress-background: @color-primary; .var-progress { - position: relative; - font-size: @font-size-sm; + position: relative; + font-size: @progress-font-size; - &-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, + &__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: @progress-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 0.2s; - } + &__certain { + position: absolute; + background-color: @progress-background; + 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(@progress-background, 50%); + } - &__certain { - transition: all 0.2s; - stroke: @color-primary; - position: absolute; - } + &__certain { + transition: all 0.2s; + stroke: @progress-background; + 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/pull-refresh/docs/en-US.md b/packages/varlet-ui/src/pull-refresh/docs/en-US.md index 293e46786c8..1301b14a111 100644 --- a/packages/varlet-ui/src/pull-refresh/docs/en-US.md +++ b/packages/varlet-ui/src/pull-refresh/docs/en-US.md @@ -81,3 +81,15 @@ export default { | Name | Description | SlotProps | | ----- | -------------- | -------- | | `default` | Default slot | - | + + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@pull-refresh-size` | `40px` | +| `@pull-refresh-background` | `#fff` | +| `@pull-refresh-color` | `#2979ff` | +| `@pull-refresh-success-color` | `#4caf50` | +| `@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 c5f0c10062b..fc1e85a00e4 100644 --- a/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md +++ b/packages/varlet-ui/src/pull-refresh/docs/zh-CN.md @@ -80,3 +80,14 @@ export default { | 名称 | 说明 | 参数 | | ----- | -------------- | -------- | | `default` | 默认插槽 | - | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@pull-refresh-size` | `40px` | +| `@pull-refresh-background` | `#fff` | +| `@pull-refresh-color` | `#2979ff` | +| `@pull-refresh-success-color` | `#4caf50` | +| `@pull-refresh-icon-size` | `25px` | diff --git a/packages/varlet-ui/src/pull-refresh/pullRefresh.less b/packages/varlet-ui/src/pull-refresh/pullRefresh.less index 2c89f0605cb..99753dfa063 100644 --- a/packages/varlet-ui/src/pull-refresh/pullRefresh.less +++ b/packages/varlet-ui/src/pull-refresh/pullRefresh.less @@ -1,44 +1,50 @@ @import '../styles/elevation'; @import '../styles/var'; +@pull-refresh-size: 40px; +@pull-refresh-background: #fff; +@pull-refresh-color: @color-primary; +@pull-refresh-success-color: @color-success; +@pull-refresh-icon-size: 25px; + .var-pull-refresh { - overflow: hidden; - position: relative; - user-select: none; + overflow: hidden; + position: relative; + user-select: none; - &__control { - display: flex; - width: 40px; - height: 40px; - align-items: center; - justify-content: center; - background-color: #fff; - border-radius: 50%; - position: absolute; - left: 50%; - z-index: 90; - color: @color-primary; + &__control { + display: flex; + width: @pull-refresh-size; + height: @pull-refresh-size; + align-items: center; + justify-content: center; + background-color: @pull-refresh-background; + border-radius: 50%; + position: absolute; + left: 50%; + z-index: 90; + color: @pull-refresh-color; - &-success { - color: @color-success; - } + &-success { + color: @pull-refresh-success-color; + } - .var-icon { - font-size: 25px; - } - } + .var-icon { + font-size: @pull-refresh-icon-size; + } + } - &__animation { - transform: rotate(0deg); - animation: iconRotate 0.6s infinite linear; - } + &__animation { + transform: rotate(0deg); + animation: iconRotate 0.6s infinite linear; + } - @keyframes iconRotate { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } + @keyframes iconRotate { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } } diff --git a/packages/varlet-ui/src/slider/docs/en-US.md b/packages/varlet-ui/src/slider/docs/en-US.md index db9cf0b385d..dc9d0557777 100644 --- a/packages/varlet-ui/src/slider/docs/en-US.md +++ b/packages/varlet-ui/src/slider/docs/en-US.md @@ -141,4 +141,17 @@ Use `rules` to validate the value | ----- | -------- | -------- | | `change` | Emitted after slider changed | value: current value | | `start` | Emitted when start dragged | - | -| `end` | Emitted when end dragged | value: current value | \ No newline at end of file +| `end` | Emitted when end dragged | value: current value | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@slider-error-color` | `#f44336` | +| `@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 diff --git a/packages/varlet-ui/src/slider/docs/zh-CN.md b/packages/varlet-ui/src/slider/docs/zh-CN.md index c235328c20b..90adada54eb 100644 --- a/packages/varlet-ui/src/slider/docs/zh-CN.md +++ b/packages/varlet-ui/src/slider/docs/zh-CN.md @@ -138,4 +138,17 @@ export default { | ----- | -------- | -------- | | `change` | 值改变时触发| value: 当前进度| | `start` | 开始拖动时触发 | - | -| `end` | 结束拖动时触发 | value: 当前进度 | \ No newline at end of file +| `end` | 结束拖动时触发 | value: 当前进度 | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@slider-error-color` | `#f44336` | +| `@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` | diff --git a/packages/varlet-ui/src/slider/slider.less b/packages/varlet-ui/src/slider/slider.less index 9fa3275a84b..410cfdd8010 100644 --- a/packages/varlet-ui/src/slider/slider.less +++ b/packages/varlet-ui/src/slider/slider.less @@ -1,120 +1,128 @@ @import '../styles/var'; +@slider-error-color: @color-danger; +@slider-track-background: #bdbdbd; +@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; + .var-slider { - &-block { - display: flex; - align-items: center; - position: relative; - flex: 1; - user-select: none; - height: 36px; - margin: 0 6px; - } - - &__disable { - filter: opacity(0.6); - } - - &__track { - width: 100%; - height: 2px; - align-items: center; - position: relative; - background: #bdbdbd; - - &-fill { - position: absolute; - height: 100%; - left: 0; - background-color: @color-primary; - } - } - - &__thumb { - position: absolute; - - &-block { - position: absolute; - width: 12px; - height: 12px; - border-radius: 50%; - transform: translate(-50%, -50%); - background-color: @color-primary; - } - - &-ripple { - position: absolute; - width: 0; - z-index: -1; - height: 0; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - border-radius: 50%; - opacity: 0.3; - background: @color-primary; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); - - &-active { - width: 36px; - height: 36px; - } - } - - &-label { - height: 24px; - width: 24px; - background-color: @color-primary; - display: flex; - align-items: center; - border: none; - justify-content: center; - color: #fff; - border-radius: 50% 50% 0; - bottom: 60%; - user-select: none; - position: absolute; - left: 45%; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); - font-size: @font-size-sm; - overflow: hidden; - transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0); - - span { - transform: rotate(-45deg); - } - - &-active { - transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1); - } - } - } - - &__error { - .var-slider__track { - background: lighten(@color-danger, 25%) !important; - - &-fill { - background-color: @color-danger !important; - } - } - - .var-slider__thumb { - &-block { - background-color: @color-danger !important; - } - - &-ripple { - background-color: @color-danger !important; - } - - &-label { - background-color: @color-danger !important; - } - } - } - - .var-form-details { - margin-left: 6px; - } + &-block { + display: flex; + align-items: center; + position: relative; + flex: 1; + user-select: none; + height: 36px; + margin: 0 6px; + } + + &__disable { + filter: opacity(0.6); + } + + &__track { + width: 100%; + height: 2px; + align-items: center; + position: relative; + background: @slider-track-background; + + &-fill { + position: absolute; + height: 100%; + left: 0; + background-color: @slider-track-fill-background; + } + } + + &__thumb { + position: absolute; + + &-block { + position: absolute; + width: 12px; + height: 12px; + border-radius: 50%; + transform: translate(-50%, -50%); + background-color: @slider-thumb-block-background; + } + + &-ripple { + position: absolute; + width: 0; + z-index: -1; + height: 0; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border-radius: 50%; + opacity: 0.3; + background: @slider-thumb-ripple-background; + transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + + &-active { + width: 36px; + height: 36px; + } + } + + &-label { + height: 24px; + width: 24px; + background-color: @slider-thumb-label-background; + display: flex; + align-items: center; + border: none; + justify-content: center; + color: #fff; + border-radius: 50% 50% 0; + bottom: 60%; + user-select: none; + position: absolute; + left: 45%; + transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + font-size: @slider-thumb-label-font-size; + overflow: hidden; + transform: translateY(0) translateY(0) translateX(-50%) rotate(45deg) scale(0); + + span { + transform: rotate(-45deg); + } + + &-active { + transform: translateY(-50%) translateX(-50%) rotate(45deg) scale(1); + } + } + } + + &__error { + .var-slider__track { + background: lighten(@slider-error-color, 25%) !important; + + &-fill { + background-color: @slider-error-color !important; + } + } + + .var-slider__thumb { + &-block { + background-color: @slider-error-color !important; + } + + &-ripple { + background-color: @slider-error-color !important; + } + + &-label { + background-color: @slider-error-color !important; + } + } + } + + .var-form-details { + margin-left: 6px; + } } diff --git a/packages/varlet-ui/src/switch/docs/en-US.md b/packages/varlet-ui/src/switch/docs/en-US.md index 784a75b20a6..ea27c137ab4 100644 --- a/packages/varlet-ui/src/switch/docs/en-US.md +++ b/packages/varlet-ui/src/switch/docs/en-US.md @@ -96,3 +96,17 @@ Use `rules` to validate the value | ----- | -------------- | -------- | | `click` | Emitted when component is clicked | `event: Event` | | `change` | Emitted when check status changed | `value: boolean` | + +### Theme Variables +#### The following LESS variables can be overridden at build time to modify the theme style + +| Variable | Default | +| --- | --- | +| `@switch-track-background` | `#fff` | +| `@switch-track-active-background` | `#2979ff` | +| `@switch-track-error-background` | `#f44336` | +| `@switch-ripple-color` | `#2979ff` | +| `@switch-handle-background` | `#fff` | +| `@switch-handle-color` | `#fff` | +| `@switch-handle-active-background` | `#2979ff` | +| `@switch-handle-error-background` | `#f44336` | diff --git a/packages/varlet-ui/src/switch/docs/zh-CN.md b/packages/varlet-ui/src/switch/docs/zh-CN.md index 97101d44247..0aac7e1495b 100644 --- a/packages/varlet-ui/src/switch/docs/zh-CN.md +++ b/packages/varlet-ui/src/switch/docs/zh-CN.md @@ -96,3 +96,18 @@ export default { | ----- | -------------- | -------- | | `click` | 点击时触发 | `event: Event` | | `change` | 开关状态切换时触发 | `value: boolean` | + +### 主题变量 +#### 以下less变量可通过构建时进行变量覆盖从而修改主题样式 + +| 变量名 | 默认值 | +| --- | --- | +| `@switch-track-background` | `#fff` | +| `@switch-track-active-background` | `#2979ff` | +| `@switch-track-error-background` | `#f44336` | +| `@switch-ripple-color` | `#2979ff` | +| `@switch-handle-background` | `#fff` | +| `@switch-handle-color` | `#fff` | +| `@switch-handle-active-background` | `#2979ff` | +| `@switch-handle-error-background` | `#f44336` | + diff --git a/packages/varlet-ui/src/switch/switch.less b/packages/varlet-ui/src/switch/switch.less index c316dccd2d6..93a1535a6d2 100644 --- a/packages/varlet-ui/src/switch/switch.less +++ b/packages/varlet-ui/src/switch/switch.less @@ -1,63 +1,69 @@ @import '../styles/var'; @import '../styles/elevation'; -@var-switch-normal-width: 40px; -@var-switch-normal-height: 24px; +@switch-track-background: #fff; +@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: @color-primary; +@switch-handle-error-background: @color-danger; .var-switch { - display: inline-block; - - &-block { - position: relative; - display: flex; - cursor: pointer; - align-items: center; - justify-content: center; - } - - &__disable { - filter: opacity(0.6); - cursor: not-allowed; - } - - &__track { - background: white; - filter: opacity(0.6); - - &-active { - background-color: @color-primary; - } - - &-error { - background-color: @color-danger !important; - } - } - - &__ripple { - position: absolute; - display: flex; - align-items: center; - justify-content: center; - color: @color-primary; - border-radius: 50%; - overflow: hidden; - transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); - } - - &__handle { - border-radius: 50%; - background-color: white; - display: flex; - align-items: center; - justify-content: center; - color: white; - - &-active { - background-color: @color-primary; - } - - &-error { - background-color: @color-danger !important; - } - } + display: inline-block; + + &-block { + position: relative; + display: flex; + cursor: pointer; + align-items: center; + justify-content: center; + } + + &__disable { + filter: opacity(0.6); + cursor: not-allowed; + } + + &__track { + background: @switch-track-background; + filter: opacity(0.6); + + &-active { + background-color: @switch-track-active-background; + } + + &-error { + background-color: @switch-track-error-background !important; + } + } + + &__ripple { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + color: @switch-ripple-color; + border-radius: 50%; + overflow: hidden; + transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1); + } + + &__handle { + border-radius: 50%; + background-color: @switch-handle-background; + display: flex; + align-items: center; + justify-content: center; + color: @switch-handle-color; + + &-active { + background-color: @switch-handle-active-background; + } + + &-error { + background-color: @switch-handle-error-background !important; + } + } }