From 6bdff0028509d735f3115b588aad8089e6b62098 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B8=B8=E5=90=9B?= Date: Mon, 26 Jul 2021 19:58:19 +0800 Subject: [PATCH] refactor(scrollbar): migrate css var (#2698) --- packages/theme-chalk/src/common/var.scss | 10 ++-------- packages/theme-chalk/src/scrollbar.scss | 13 +++++++++++-- website/docs/en-US/config-provider.md | 21 ++++++++++----------- website/docs/es/config-provider.md | 21 ++++++++++----------- website/docs/fr-FR/config-provider.md | 21 ++++++++++----------- website/docs/jp/config-provider.md | 21 ++++++++++----------- website/docs/zh-CN/config-provider.md | 21 ++++++++++----------- 7 files changed, 63 insertions(+), 65 deletions(-) diff --git a/packages/theme-chalk/src/common/var.scss b/packages/theme-chalk/src/common/var.scss index 56bc9a5644..a52b21b903 100644 --- a/packages/theme-chalk/src/common/var.scss +++ b/packages/theme-chalk/src/common/var.scss @@ -580,14 +580,8 @@ $--loading-fullscreen-spinner-size: 50px !default; /* Scrollbar --------------------------*/ -$--scrollbar-background-color: rgba( - var(--el-text-color-secondary), - 0.3 -) !default; -$--scrollbar-hover-background-color: rgba( - var(--el-text-color-secondary), - 0.5 -) !default; +// refactor with css3 var +// See packages/theme-chalk/src/scrollbar.scss /* Carousel --------------------------*/ diff --git a/packages/theme-chalk/src/scrollbar.scss b/packages/theme-chalk/src/scrollbar.scss index 9644aa64a5..d1f7e4e155 100644 --- a/packages/theme-chalk/src/scrollbar.scss +++ b/packages/theme-chalk/src/scrollbar.scss @@ -1,6 +1,13 @@ @import 'mixins/mixins'; @import 'common/var'; +:root { + --el-scrollbar-opacity: 0.3; + --el-scrollbar-background-color: var(--el-text-color-secondary); + --el-scrollbar-hover-opacity: 0.5; + --el-scrollbar-hover-background-color: var(--el-text-color-secondary); +} + @include b(scrollbar) { overflow: hidden; position: relative; @@ -25,11 +32,13 @@ height: 0; cursor: pointer; border-radius: inherit; - background-color: $--scrollbar-background-color; + background-color: var(--el-scrollbar-background-color); transition: var(--el-transition-duration) background-color; + opacity: var(--el-scrollbar-opacity); &:hover { - background-color: $--scrollbar-hover-background-color; + background-color: var(--el-scrollbar-hover-background-color); + opacity: var(--el-scrollbar-hover-opacity); } } diff --git a/website/docs/en-US/config-provider.md b/website/docs/en-US/config-provider.md index 294a1e2248..f3cb6ddaea 100644 --- a/website/docs/en-US/config-provider.md +++ b/website/docs/en-US/config-provider.md @@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching ```html
- + Switch Lang @@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching confirm: '确定', clear: '清空', }, - } + }, }, locale2: { name: 'en', @@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching confirm: 'Confirm', clear: 'Clear', }, - } - } + }, + }, } }, methods: { @@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching const temp = this.locale1 this.locale1 = this.locale2 this.locale2 = temp - } - } + }, + }, } - ``` ::: ### ConfigProvider Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- | -| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | -| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- | +| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | +| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | diff --git a/website/docs/es/config-provider.md b/website/docs/es/config-provider.md index 04c0418934..4ab42b5827 100644 --- a/website/docs/es/config-provider.md +++ b/website/docs/es/config-provider.md @@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching ```html
- + Switch Lang @@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching confirm: 'Confirmar', clear: 'Despejar', }, - } + }, }, locale2: { name: 'en', @@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching confirm: 'Confirm', clear: 'Clear', }, - } - } + }, + }, } }, methods: { @@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching const temp = this.locale1 this.locale1 = this.locale2 this.locale2 = temp - } - } + }, + }, } - ``` ::: ### ConfigProvider Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- | -| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | -| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- | +| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | +| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | diff --git a/website/docs/fr-FR/config-provider.md b/website/docs/fr-FR/config-provider.md index d7574f6d4b..b3ae7cbfa6 100644 --- a/website/docs/fr-FR/config-provider.md +++ b/website/docs/fr-FR/config-provider.md @@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching ```html
- + Switch Lang @@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching confirm: 'OK', clear: 'Effacer', }, - } + }, }, locale2: { name: 'en', @@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching confirm: 'Confirm', clear: 'Clear', }, - } - } + }, + }, } }, methods: { @@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching const temp = this.locale1 this.locale1 = this.locale2 this.locale2 = temp - } - } + }, + }, } - ``` ::: ### ConfigProvider Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- | -| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | -| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- | +| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | +| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | diff --git a/website/docs/jp/config-provider.md b/website/docs/jp/config-provider.md index 9d931cb632..e5d91147bb 100644 --- a/website/docs/jp/config-provider.md +++ b/website/docs/jp/config-provider.md @@ -11,7 +11,7 @@ Configure i18n related properties via Config Provider, to get language switching ```html
- + Switch Lang @@ -30,7 +30,7 @@ Configure i18n related properties via Config Provider, to get language switching confirm: 'はい', clear: 'クリア', }, - } + }, }, locale2: { name: 'zh-cn', @@ -39,8 +39,8 @@ Configure i18n related properties via Config Provider, to get language switching confirm: '确定', clear: '清除', }, - } - } + }, + }, } }, methods: { @@ -48,18 +48,17 @@ Configure i18n related properties via Config Provider, to get language switching const temp = this.locale1 this.locale1 = this.locale2 this.locale2 = temp - } - } + }, + }, } - ``` ::: ### ConfigProvider Attributes -| Attribute | Description | Type | Accepted Values | Default | -| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- | -| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | -| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | +| Attribute | Description | Type | Accepted Values | Default | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- | +| locale | Locale Object | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | +| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - | diff --git a/website/docs/zh-CN/config-provider.md b/website/docs/zh-CN/config-provider.md index 5544ed4472..1d0ba04e3f 100644 --- a/website/docs/zh-CN/config-provider.md +++ b/website/docs/zh-CN/config-provider.md @@ -11,7 +11,7 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在 ```html
- + 切换语言 @@ -30,7 +30,7 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在 confirm: '确定', clear: '清空', }, - } + }, }, locale2: { name: 'en', @@ -39,8 +39,8 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在 confirm: 'Confirm', clear: 'Clear', }, - } - } + }, + }, } }, methods: { @@ -48,18 +48,17 @@ Config Provider 被用来提供全局的配置选项，让你的配置能够在 const temp = this.locale1 this.locale1 = this.locale2 this.locale2 = temp - } - } + }, + }, } - ``` ::: ### ConfigProvider 属性 -| 参数 | 说明 | 类型 | 可选值 | 默认值 | -| ------ | ------------ | ---------------- | --------------------------------------------------------------------------------------- | ------- | -| locale | 翻译文本对象 | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | -| i18n | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | - | - | +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +| ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- | +| locale | 翻译文本对象 | Object\ | [languages](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) | English | +| i18n | 外部的翻译方法，当该方法被提供时，会优先使用该方法进行翻译的操作，若返回空值便会落回到自带翻译方法 | Function\<(...args: []) =\> string\> | - | - |